"use client"

import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Sidebar } from "@/components/dashboard/sidebar"
import { ThemeToggle } from "@/components/theme-toggle"
import { cn } from "@/lib/utils"
import {
  User,
  MapPin,
  Briefcase,
  GraduationCap,
  Link2,
  Shield,
  Bell,
  Pencil,
  X,
  Check,
  Camera,
  Globe,
  Linkedin,
  Twitter,
  ArrowLeft,
  Plus,
  Trash2,
  Building2,
  CircleDollarSign,
  Target,
  Award,
  TrendingUp,
  DollarSign,
  Users,
  FileText,
} from "lucide-react"

type UserType = "individual" | "business" | "investor"

interface EditableSectionProps {
  title: string
  icon: React.ElementType
  children: React.ReactNode
  editContent: React.ReactNode
  isEditing: boolean
  onEdit: () => void
  onSave: () => void
  onCancel: () => void
}

function EditableSection({
  title,
  icon: Icon,
  children,
  editContent,
  isEditing,
  onEdit,
  onSave,
  onCancel,
}: EditableSectionProps) {
  return (
    <div className="rounded-2xl glass glass-border overflow-hidden">
      <div className="flex items-center justify-between px-5 py-4 border-b border-border/50">
        <div className="flex items-center gap-3">
          <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10">
            <Icon className="h-5 w-5 text-primary" />
          </div>
          <h3 className="font-semibold text-foreground">{title}</h3>
        </div>
        {!isEditing ? (
          <Button variant="ghost" size="sm" onClick={onEdit} className="gap-2">
            <Pencil className="h-4 w-4" />
            Edit
          </Button>
        ) : (
          <div className="flex items-center gap-2">
            <Button variant="ghost" size="sm" onClick={onCancel}>
              <X className="h-4 w-4" />
            </Button>
            <Button size="sm" onClick={onSave} className="gap-2">
              <Check className="h-4 w-4" />
              Save
            </Button>
          </div>
        )}
      </div>
      <div className="p-5">
        {isEditing ? editContent : children}
      </div>
    </div>
  )
}

export default function ProfileSettingsPage() {
  const [userType, setUserType] = useState<UserType>("individual")
  const [editingSection, setEditingSection] = useState<string | null>(null)
  
  // Common profile data
  const [profile, setProfile] = useState({
    name: "Khushoo Gupta",
    username: "khushoo",
    bio: "Passionate entrepreneur building the future of innovation.",
    location: "Mumbai, India",
    website: "https://khushoo.com",
    linkedin: "linkedin.com/in/khushoo",
    twitter: "@khushoo",
  })
  
  // Individual specific - arrays for add more feature
  const [education, setEducation] = useState([
    { id: 1, degree: "MBA", institution: "IIM Ahmedabad", year: "2020" },
    { id: 2, degree: "B.Tech CS", institution: "IIT Delhi", year: "2018" },
  ])
  
  const [experience, setExperience] = useState([
    { id: 1, role: "Founder & CEO", company: "TechStartup", duration: "2020 - Present" },
    { id: 2, role: "Product Manager", company: "Google", duration: "2018 - 2020" },
  ])
  
  const [skills, setSkills] = useState(["Product Management", "AI/ML", "Startup Strategy", "Fundraising"])
  const [newSkill, setNewSkill] = useState("")
  
  // Business specific
  const [companyInfo, setCompanyInfo] = useState({
    companyName: "TechVentures Pvt Ltd",
    industry: "Technology",
    founded: "2015",
    size: "50-100 employees",
    description: "Leading technology company focused on innovative solutions.",
  })
  
  const [lookingFor, setLookingFor] = useState(["AI/ML Solutions", "Supply Chain Innovation", "Green Technology"])
  const [newLookingFor, setNewLookingFor] = useState("")
  
  const [benefits, setBenefits] = useState([
    { id: 1, title: "Funding Support", description: "Up to 50L for promising ideas" },
    { id: 2, title: "Mentorship", description: "Access to industry experts" },
  ])
  
  const [keyPeople, setKeyPeople] = useState([
    { id: 1, name: "Rajesh Kumar", role: "CEO", avatar: "RK" },
    { id: 2, name: "Priya Singh", role: "CTO", avatar: "PS" },
  ])
  
  // Investor specific
  const [investorInfo, setInvestorInfo] = useState({
    investorType: "Angel Investor",
    investmentRange: "10L - 1Cr",
    totalInvested: "5Cr+",
    activeDeals: "8",
  })
  
  const [sectors, setSectors] = useState([
    { id: 1, name: "Technology", allocation: 40 },
    { id: 2, name: "Healthcare", allocation: 30 },
    { id: 3, name: "FinTech", allocation: 30 },
  ])
  
  const [criteria, setCriteria] = useState([
    "Strong founding team",
    "Clear market opportunity", 
    "Scalable business model",
    "Early traction"
  ])
  const [newCriteria, setNewCriteria] = useState("")
  
  const [portfolio, setPortfolio] = useState([
    { id: 1, company: "HealthTech AI", status: "Active", invested: "25L" },
    { id: 2, company: "EduLearn", status: "Exited 3x", invested: "15L" },
  ])
  
  const [tempProfile, setTempProfile] = useState(profile)

  const startEditing = (section: string) => {
    setTempProfile(profile)
    setEditingSection(section)
  }

  const saveSection = () => {
    setProfile(tempProfile)
    setEditingSection(null)
  }

  const cancelEditing = () => {
    setTempProfile(profile)
    setEditingSection(null)
  }

  const userTypeConfig = {
    individual: { label: "Individual", icon: User, color: "text-primary border-primary bg-primary/10" },
    business: { label: "Business", icon: Building2, color: "text-amber-400 border-amber-400 bg-amber-400/10" },
    investor: { label: "Investor", icon: CircleDollarSign, color: "text-emerald-400 border-emerald-400 bg-emerald-400/10" },
  }

  const profileUrl = userType === "individual" ? "/profile/individual" : userType === "business" ? "/profile/business" : "/profile/investor"

  return (
    <div className="min-h-screen bg-background">
      <Sidebar />
      
      <div className="lg:pl-72">
        {/* Header */}
        <header className="sticky top-0 z-30 flex h-16 items-center justify-between border-b border-border/50 glass px-4 lg:px-6">
          <div className="flex items-center gap-4">
            <Link href="/" className="lg:hidden">
              <Button variant="ghost" size="icon">
                <ArrowLeft className="h-5 w-5" />
              </Button>
            </Link>
            <h1 className="text-lg font-semibold text-foreground">Profile Settings</h1>
          </div>
          <Link href={profileUrl}>
            <Button variant="outline" size="sm" className="gap-2">
              <Globe className="h-4 w-4" />
              View Public Profile
            </Button>
          </Link>
        </header>

        <main className="p-4 lg:p-6 max-w-3xl mx-auto space-y-6">
          {/* Profile Picture & User Type */}
          <div className="rounded-2xl glass glass-border p-6">
            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-6">
              <div className="relative group">
                <div className="h-24 w-24 rounded-2xl bg-gradient-to-br from-primary to-accent flex items-center justify-center text-3xl font-bold text-white">
                  KG
                </div>
                <button className="absolute inset-0 flex items-center justify-center bg-black/50 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity">
                  <Camera className="h-6 w-6 text-white" />
                </button>
              </div>
              <div className="flex-1">
                <h2 className="text-xl font-bold text-foreground mb-1">{profile.name}</h2>
                <p className="text-sm text-muted-foreground mb-3">checkuridea.com/{profile.username}</p>
                <div className="flex flex-wrap gap-2">
                  {(Object.entries(userTypeConfig) as [UserType, typeof userTypeConfig.individual][]).map(([type, config]) => (
                    <button
                      key={type}
                      onClick={() => setUserType(type)}
                      className={cn(
                        "flex items-center gap-2 px-3 py-1.5 rounded-lg border text-sm transition-all",
                        userType === type ? config.color : "border-border text-muted-foreground hover:border-muted-foreground"
                      )}
                    >
                      <config.icon className="h-4 w-4" />
                      {config.label}
                    </button>
                  ))}
                </div>
              </div>
            </div>
          </div>

          {/* Basic Info - Common */}
          <EditableSection
            title="Basic Information"
            icon={User}
            isEditing={editingSection === "basic"}
            onEdit={() => startEditing("basic")}
            onSave={saveSection}
            onCancel={cancelEditing}
            editContent={
              <div className="space-y-4">
                <div>
                  <label className="text-sm font-medium text-foreground mb-1.5 block">Full Name</label>
                  <Input value={tempProfile.name} onChange={(e) => setTempProfile({ ...tempProfile, name: e.target.value })} className="bg-secondary/30" />
                </div>
                <div>
                  <label className="text-sm font-medium text-foreground mb-1.5 block">Username</label>
                  <div className="flex">
                    <span className="px-3 py-2 rounded-l-lg bg-secondary border border-r-0 border-border text-sm text-muted-foreground">checkuridea.com/</span>
                    <Input value={tempProfile.username} onChange={(e) => setTempProfile({ ...tempProfile, username: e.target.value.toLowerCase().replace(/[^a-z0-9_]/g, "") })} className="rounded-l-none bg-secondary/30" />
                  </div>
                </div>
                <div>
                  <label className="text-sm font-medium text-foreground mb-1.5 block">Bio</label>
                  <textarea value={tempProfile.bio} onChange={(e) => setTempProfile({ ...tempProfile, bio: e.target.value })} rows={3} className="w-full rounded-lg bg-secondary/30 border border-border/50 px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 resize-none" />
                </div>
              </div>
            }
          >
            <div className="space-y-2">
              <p className="text-foreground font-medium">{profile.name}</p>
              <p className="text-sm text-primary">@{profile.username}</p>
              <p className="text-sm text-muted-foreground">{profile.bio}</p>
            </div>
          </EditableSection>

          {/* Location & Website - Common */}
          <EditableSection
            title="Location & Website"
            icon={MapPin}
            isEditing={editingSection === "location"}
            onEdit={() => startEditing("location")}
            onSave={saveSection}
            onCancel={cancelEditing}
            editContent={
              <div className="space-y-4">
                <div>
                  <label className="text-sm font-medium text-foreground mb-1.5 block">Location</label>
                  <Input value={tempProfile.location} onChange={(e) => setTempProfile({ ...tempProfile, location: e.target.value })} className="bg-secondary/30" placeholder="City, Country" />
                </div>
                <div>
                  <label className="text-sm font-medium text-foreground mb-1.5 block">Website</label>
                  <Input value={tempProfile.website} onChange={(e) => setTempProfile({ ...tempProfile, website: e.target.value })} className="bg-secondary/30" placeholder="https://yourwebsite.com" />
                </div>
              </div>
            }
          >
            <div className="flex flex-wrap gap-4 text-sm">
              <span className="flex items-center gap-2 text-muted-foreground"><MapPin className="h-4 w-4" />{profile.location}</span>
              <a href={profile.website} className="flex items-center gap-2 text-primary hover:underline"><Globe className="h-4 w-4" />{profile.website}</a>
            </div>
          </EditableSection>

          {/* INDIVIDUAL SECTIONS */}
          {userType === "individual" && (
            <>
              {/* Education with Add More */}
              <EditableSection
                title="Education"
                icon={GraduationCap}
                isEditing={editingSection === "education"}
                onEdit={() => startEditing("education")}
                onSave={() => setEditingSection(null)}
                onCancel={() => setEditingSection(null)}
                editContent={
                  <div className="space-y-3">
                    {education.map((edu, idx) => (
                      <div key={edu.id} className="flex items-start gap-3 p-3 rounded-xl bg-secondary/30">
                        <div className="flex-1 space-y-2">
                          <Input defaultValue={edu.degree} placeholder="Degree" className="bg-secondary/50" />
                          <Input defaultValue={edu.institution} placeholder="Institution" className="bg-secondary/50" />
                          <Input defaultValue={edu.year} placeholder="Year" className="bg-secondary/50" />
                        </div>
                        <button onClick={() => setEducation(education.filter((_, i) => i !== idx))} className="text-destructive hover:text-destructive/80 p-2">
                          <Trash2 className="h-4 w-4" />
                        </button>
                      </div>
                    ))}
                    <button onClick={() => setEducation([...education, { id: Date.now(), degree: "", institution: "", year: "" }])} className="flex items-center gap-2 text-sm text-primary hover:text-primary/80 mt-2">
                      <Plus className="h-4 w-4" /> Add Education
                    </button>
                  </div>
                }
              >
                <div className="space-y-3">
                  {education.map((edu) => (
                    <div key={edu.id}>
                      <p className="font-medium text-foreground">{edu.degree}</p>
                      <p className="text-sm text-muted-foreground">{edu.institution} - {edu.year}</p>
                    </div>
                  ))}
                </div>
              </EditableSection>

              {/* Experience with Add More */}
              <EditableSection
                title="Work Experience"
                icon={Briefcase}
                isEditing={editingSection === "experience"}
                onEdit={() => startEditing("experience")}
                onSave={() => setEditingSection(null)}
                onCancel={() => setEditingSection(null)}
                editContent={
                  <div className="space-y-3">
                    {experience.map((exp, idx) => (
                      <div key={exp.id} className="flex items-start gap-3 p-3 rounded-xl bg-secondary/30">
                        <div className="flex-1 space-y-2">
                          <Input defaultValue={exp.role} placeholder="Role" className="bg-secondary/50" />
                          <Input defaultValue={exp.company} placeholder="Company" className="bg-secondary/50" />
                          <Input defaultValue={exp.duration} placeholder="Duration" className="bg-secondary/50" />
                        </div>
                        <button onClick={() => setExperience(experience.filter((_, i) => i !== idx))} className="text-destructive hover:text-destructive/80 p-2">
                          <Trash2 className="h-4 w-4" />
                        </button>
                      </div>
                    ))}
                    <button onClick={() => setExperience([...experience, { id: Date.now(), role: "", company: "", duration: "" }])} className="flex items-center gap-2 text-sm text-primary hover:text-primary/80 mt-2">
                      <Plus className="h-4 w-4" /> Add Experience
                    </button>
                  </div>
                }
              >
                <div className="space-y-3">
                  {experience.map((exp) => (
                    <div key={exp.id}>
                      <p className="font-medium text-foreground">{exp.role}</p>
                      <p className="text-sm text-muted-foreground">{exp.company} - {exp.duration}</p>
                    </div>
                  ))}
                </div>
              </EditableSection>

              {/* Skills with Add More */}
              <EditableSection
                title="Skills & Interests"
                icon={Award}
                isEditing={editingSection === "skills"}
                onEdit={() => startEditing("skills")}
                onSave={() => setEditingSection(null)}
                onCancel={() => setEditingSection(null)}
                editContent={
                  <div>
                    <div className="flex flex-wrap gap-2 mb-3">
                      {skills.map((skill, idx) => (
                        <span key={idx} className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-secondary text-sm">
                          {skill}
                          <button onClick={() => setSkills(skills.filter((_, i) => i !== idx))} className="text-muted-foreground hover:text-destructive">
                            <X className="h-3 w-3" />
                          </button>
                        </span>
                      ))}
                    </div>
                    <div className="flex gap-2">
                      <Input value={newSkill} onChange={(e) => setNewSkill(e.target.value)} placeholder="Add a skill" className="bg-secondary/30" onKeyDown={(e) => { if (e.key === "Enter" && newSkill.trim()) { setSkills([...skills, newSkill.trim()]); setNewSkill(""); }}} />
                      <Button onClick={() => { if (newSkill.trim()) { setSkills([...skills, newSkill.trim()]); setNewSkill(""); }}} size="icon"><Plus className="h-4 w-4" /></Button>
                    </div>
                  </div>
                }
              >
                <div className="flex flex-wrap gap-2">
                  {skills.map((skill, idx) => (
                    <span key={idx} className="px-3 py-1.5 rounded-full bg-primary/10 text-primary text-sm">{skill}</span>
                  ))}
                </div>
              </EditableSection>
            </>
          )}

          {/* BUSINESS SECTIONS */}
          {userType === "business" && (
            <>
              {/* Company Info */}
              <EditableSection
                title="Company Information"
                icon={Building2}
                isEditing={editingSection === "company"}
                onEdit={() => startEditing("company")}
                onSave={() => setEditingSection(null)}
                onCancel={() => setEditingSection(null)}
                editContent={
                  <div className="space-y-4">
                    <div>
                      <label className="text-sm font-medium text-foreground mb-1.5 block">Company Name</label>
                      <Input value={companyInfo.companyName} onChange={(e) => setCompanyInfo({...companyInfo, companyName: e.target.value})} className="bg-secondary/30" />
                    </div>
                    <div className="grid grid-cols-2 gap-4">
                      <div>
                        <label className="text-sm font-medium text-foreground mb-1.5 block">Industry</label>
                        <Input value={companyInfo.industry} onChange={(e) => setCompanyInfo({...companyInfo, industry: e.target.value})} className="bg-secondary/30" />
                      </div>
                      <div>
                        <label className="text-sm font-medium text-foreground mb-1.5 block">Founded</label>
                        <Input value={companyInfo.founded} onChange={(e) => setCompanyInfo({...companyInfo, founded: e.target.value})} className="bg-secondary/30" />
                      </div>
                    </div>
                    <div>
                      <label className="text-sm font-medium text-foreground mb-1.5 block">Company Size</label>
                      <Input value={companyInfo.size} onChange={(e) => setCompanyInfo({...companyInfo, size: e.target.value})} className="bg-secondary/30" />
                    </div>
                    <div>
                      <label className="text-sm font-medium text-foreground mb-1.5 block">Description</label>
                      <textarea value={companyInfo.description} onChange={(e) => setCompanyInfo({...companyInfo, description: e.target.value})} rows={3} className="w-full rounded-lg bg-secondary/30 border border-border/50 px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 resize-none" />
                    </div>
                  </div>
                }
              >
                <div className="space-y-2">
                  <p className="font-medium text-lg text-foreground">{companyInfo.companyName}</p>
                  <div className="flex flex-wrap gap-3 text-sm text-muted-foreground">
                    <span>{companyInfo.industry}</span>
                    <span>Founded {companyInfo.founded}</span>
                    <span>{companyInfo.size}</span>
                  </div>
                  <p className="text-sm text-foreground">{companyInfo.description}</p>
                </div>
              </EditableSection>

              {/* Looking For */}
              <EditableSection
                title="Ideas We're Looking For"
                icon={Target}
                isEditing={editingSection === "lookingFor"}
                onEdit={() => startEditing("lookingFor")}
                onSave={() => setEditingSection(null)}
                onCancel={() => setEditingSection(null)}
                editContent={
                  <div>
                    <div className="flex flex-wrap gap-2 mb-3">
                      {lookingFor.map((item, idx) => (
                        <span key={idx} className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-secondary text-sm">
                          {item}
                          <button onClick={() => setLookingFor(lookingFor.filter((_, i) => i !== idx))} className="text-muted-foreground hover:text-destructive">
                            <X className="h-3 w-3" />
                          </button>
                        </span>
                      ))}
                    </div>
                    <div className="flex gap-2">
                      <Input value={newLookingFor} onChange={(e) => setNewLookingFor(e.target.value)} placeholder="Add category" className="bg-secondary/30" onKeyDown={(e) => { if (e.key === "Enter" && newLookingFor.trim()) { setLookingFor([...lookingFor, newLookingFor.trim()]); setNewLookingFor(""); }}} />
                      <Button onClick={() => { if (newLookingFor.trim()) { setLookingFor([...lookingFor, newLookingFor.trim()]); setNewLookingFor(""); }}} size="icon"><Plus className="h-4 w-4" /></Button>
                    </div>
                  </div>
                }
              >
                <div className="flex flex-wrap gap-2">
                  {lookingFor.map((item, idx) => (
                    <span key={idx} className="px-3 py-1.5 rounded-full bg-amber-400/10 text-amber-400 text-sm">{item}</span>
                  ))}
                </div>
              </EditableSection>

              {/* Benefits with Add More */}
              <EditableSection
                title="Benefits We Offer"
                icon={Award}
                isEditing={editingSection === "benefits"}
                onEdit={() => startEditing("benefits")}
                onSave={() => setEditingSection(null)}
                onCancel={() => setEditingSection(null)}
                editContent={
                  <div className="space-y-3">
                    {benefits.map((benefit, idx) => (
                      <div key={benefit.id} className="flex items-start gap-3 p-3 rounded-xl bg-secondary/30">
                        <div className="flex-1 space-y-2">
                          <Input defaultValue={benefit.title} placeholder="Benefit title" className="bg-secondary/50" />
                          <Input defaultValue={benefit.description} placeholder="Description" className="bg-secondary/50" />
                        </div>
                        <button onClick={() => setBenefits(benefits.filter((_, i) => i !== idx))} className="text-destructive hover:text-destructive/80 p-2">
                          <Trash2 className="h-4 w-4" />
                        </button>
                      </div>
                    ))}
                    <button onClick={() => setBenefits([...benefits, { id: Date.now(), title: "", description: "" }])} className="flex items-center gap-2 text-sm text-amber-400 hover:text-amber-400/80 mt-2">
                      <Plus className="h-4 w-4" /> Add Benefit
                    </button>
                  </div>
                }
              >
                <div className="space-y-3">
                  {benefits.map((benefit) => (
                    <div key={benefit.id} className="flex items-start gap-3">
                      <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-amber-400/10 shrink-0">
                        <Award className="h-4 w-4 text-amber-400" />
                      </div>
                      <div>
                        <p className="font-medium text-foreground">{benefit.title}</p>
                        <p className="text-sm text-muted-foreground">{benefit.description}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </EditableSection>

              {/* Key People with Add More */}
              <EditableSection
                title="Key People"
                icon={Users}
                isEditing={editingSection === "keyPeople"}
                onEdit={() => startEditing("keyPeople")}
                onSave={() => setEditingSection(null)}
                onCancel={() => setEditingSection(null)}
                editContent={
                  <div className="space-y-3">
                    {keyPeople.map((person, idx) => (
                      <div key={person.id} className="flex items-center gap-3 p-3 rounded-xl bg-secondary/30">
                        <div className="flex-1 grid grid-cols-2 gap-2">
                          <Input defaultValue={person.name} placeholder="Name" className="bg-secondary/50" />
                          <Input defaultValue={person.role} placeholder="Role" className="bg-secondary/50" />
                        </div>
                        <button onClick={() => setKeyPeople(keyPeople.filter((_, i) => i !== idx))} className="text-destructive hover:text-destructive/80 p-2">
                          <Trash2 className="h-4 w-4" />
                        </button>
                      </div>
                    ))}
                    <button onClick={() => setKeyPeople([...keyPeople, { id: Date.now(), name: "", role: "", avatar: "?" }])} className="flex items-center gap-2 text-sm text-amber-400 hover:text-amber-400/80 mt-2">
                      <Plus className="h-4 w-4" /> Add Person
                    </button>
                  </div>
                }
              >
                <div className="flex flex-wrap gap-4">
                  {keyPeople.map((person) => (
                    <div key={person.id} className="flex items-center gap-3">
                      <div className="h-10 w-10 rounded-full bg-amber-400/20 flex items-center justify-center text-amber-400 font-medium text-sm">{person.avatar}</div>
                      <div>
                        <p className="font-medium text-foreground text-sm">{person.name}</p>
                        <p className="text-xs text-muted-foreground">{person.role}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </EditableSection>
            </>
          )}

          {/* INVESTOR SECTIONS */}
          {userType === "investor" && (
            <>
              {/* Investor Profile */}
              <EditableSection
                title="Investment Profile"
                icon={CircleDollarSign}
                isEditing={editingSection === "investorProfile"}
                onEdit={() => startEditing("investorProfile")}
                onSave={() => setEditingSection(null)}
                onCancel={() => setEditingSection(null)}
                editContent={
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="text-sm font-medium text-foreground mb-1.5 block">Investor Type</label>
                      <select value={investorInfo.investorType} onChange={(e) => setInvestorInfo({...investorInfo, investorType: e.target.value})} className="w-full rounded-lg bg-secondary/30 border border-border/50 px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50">
                        <option>Angel Investor</option>
                        <option>Venture Capitalist</option>
                        <option>Private Equity</option>
                        <option>Family Office</option>
                      </select>
                    </div>
                    <div>
                      <label className="text-sm font-medium text-foreground mb-1.5 block">Investment Range</label>
                      <Input value={investorInfo.investmentRange} onChange={(e) => setInvestorInfo({...investorInfo, investmentRange: e.target.value})} className="bg-secondary/30" />
                    </div>
                    <div>
                      <label className="text-sm font-medium text-foreground mb-1.5 block">Total Invested</label>
                      <Input value={investorInfo.totalInvested} onChange={(e) => setInvestorInfo({...investorInfo, totalInvested: e.target.value})} className="bg-secondary/30" />
                    </div>
                    <div>
                      <label className="text-sm font-medium text-foreground mb-1.5 block">Active Deals</label>
                      <Input value={investorInfo.activeDeals} onChange={(e) => setInvestorInfo({...investorInfo, activeDeals: e.target.value})} className="bg-secondary/30" />
                    </div>
                  </div>
                }
              >
                <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
                  <div className="text-center p-3 rounded-xl bg-emerald-500/10">
                    <p className="text-xl font-bold text-emerald-400">{investorInfo.totalInvested}</p>
                    <p className="text-xs text-muted-foreground">Total Invested</p>
                  </div>
                  <div className="text-center p-3 rounded-xl bg-secondary/50">
                    <p className="text-xl font-bold text-foreground">{investorInfo.activeDeals}</p>
                    <p className="text-xs text-muted-foreground">Active Deals</p>
                  </div>
                  <div className="text-center p-3 rounded-xl bg-secondary/50">
                    <p className="text-sm font-bold text-foreground">{investorInfo.investmentRange}</p>
                    <p className="text-xs text-muted-foreground">Range</p>
                  </div>
                  <div className="text-center p-3 rounded-xl bg-secondary/50">
                    <p className="text-sm font-bold text-foreground">{investorInfo.investorType}</p>
                    <p className="text-xs text-muted-foreground">Type</p>
                  </div>
                </div>
              </EditableSection>

              {/* Sectors with Add More */}
              <EditableSection
                title="Investment Sectors"
                icon={TrendingUp}
                isEditing={editingSection === "sectors"}
                onEdit={() => startEditing("sectors")}
                onSave={() => setEditingSection(null)}
                onCancel={() => setEditingSection(null)}
                editContent={
                  <div className="space-y-3">
                    {sectors.map((sector, idx) => (
                      <div key={sector.id} className="flex items-center gap-3 p-3 rounded-xl bg-secondary/30">
                        <div className="flex-1 grid grid-cols-2 gap-2">
                          <Input defaultValue={sector.name} placeholder="Sector" className="bg-secondary/50" />
                          <Input defaultValue={sector.allocation.toString()} placeholder="%" type="number" className="bg-secondary/50" />
                        </div>
                        <button onClick={() => setSectors(sectors.filter((_, i) => i !== idx))} className="text-destructive hover:text-destructive/80 p-2">
                          <Trash2 className="h-4 w-4" />
                        </button>
                      </div>
                    ))}
                    <button onClick={() => setSectors([...sectors, { id: Date.now(), name: "", allocation: 0 }])} className="flex items-center gap-2 text-sm text-emerald-400 hover:text-emerald-400/80 mt-2">
                      <Plus className="h-4 w-4" /> Add Sector
                    </button>
                  </div>
                }
              >
                <div className="space-y-3">
                  {sectors.map((sector) => (
                    <div key={sector.id}>
                      <div className="flex justify-between mb-1">
                        <span className="text-sm font-medium text-foreground">{sector.name}</span>
                        <span className="text-sm text-muted-foreground">{sector.allocation}%</span>
                      </div>
                      <div className="h-2 rounded-full bg-secondary overflow-hidden">
                        <div className="h-full rounded-full bg-emerald-400" style={{ width: `${sector.allocation}%` }} />
                      </div>
                    </div>
                  ))}
                </div>
              </EditableSection>

              {/* Investment Criteria */}
              <EditableSection
                title="Investment Criteria"
                icon={FileText}
                isEditing={editingSection === "criteria"}
                onEdit={() => startEditing("criteria")}
                onSave={() => setEditingSection(null)}
                onCancel={() => setEditingSection(null)}
                editContent={
                  <div>
                    <ul className="space-y-2 mb-3">
                      {criteria.map((item, idx) => (
                        <li key={idx} className="flex items-center gap-2 p-2 rounded-lg bg-secondary/30">
                          <Check className="h-4 w-4 text-emerald-400 shrink-0" />
                          <span className="flex-1 text-sm">{item}</span>
                          <button onClick={() => setCriteria(criteria.filter((_, i) => i !== idx))} className="text-muted-foreground hover:text-destructive">
                            <X className="h-4 w-4" />
                          </button>
                        </li>
                      ))}
                    </ul>
                    <div className="flex gap-2">
                      <Input value={newCriteria} onChange={(e) => setNewCriteria(e.target.value)} placeholder="Add criteria" className="bg-secondary/30" onKeyDown={(e) => { if (e.key === "Enter" && newCriteria.trim()) { setCriteria([...criteria, newCriteria.trim()]); setNewCriteria(""); }}} />
                      <Button onClick={() => { if (newCriteria.trim()) { setCriteria([...criteria, newCriteria.trim()]); setNewCriteria(""); }}} size="icon"><Plus className="h-4 w-4" /></Button>
                    </div>
                  </div>
                }
              >
                <ul className="space-y-2">
                  {criteria.map((item, idx) => (
                    <li key={idx} className="flex items-center gap-2 text-sm">
                      <Check className="h-4 w-4 text-emerald-400" />
                      {item}
                    </li>
                  ))}
                </ul>
              </EditableSection>

              {/* Portfolio with Add More */}
              <EditableSection
                title="Portfolio Companies"
                icon={Briefcase}
                isEditing={editingSection === "portfolio"}
                onEdit={() => startEditing("portfolio")}
                onSave={() => setEditingSection(null)}
                onCancel={() => setEditingSection(null)}
                editContent={
                  <div className="space-y-3">
                    {portfolio.map((company, idx) => (
                      <div key={company.id} className="flex items-center gap-3 p-3 rounded-xl bg-secondary/30">
                        <div className="flex-1 grid grid-cols-3 gap-2">
                          <Input defaultValue={company.company} placeholder="Company" className="bg-secondary/50" />
                          <Input defaultValue={company.status} placeholder="Status" className="bg-secondary/50" />
                          <Input defaultValue={company.invested} placeholder="Amount" className="bg-secondary/50" />
                        </div>
                        <button onClick={() => setPortfolio(portfolio.filter((_, i) => i !== idx))} className="text-destructive hover:text-destructive/80 p-2">
                          <Trash2 className="h-4 w-4" />
                        </button>
                      </div>
                    ))}
                    <button onClick={() => setPortfolio([...portfolio, { id: Date.now(), company: "", status: "", invested: "" }])} className="flex items-center gap-2 text-sm text-emerald-400 hover:text-emerald-400/80 mt-2">
                      <Plus className="h-4 w-4" /> Add Company
                    </button>
                  </div>
                }
              >
                <div className="space-y-3">
                  {portfolio.map((company) => (
                    <div key={company.id} className="flex items-center justify-between p-3 rounded-xl bg-secondary/30">
                      <div>
                        <p className="font-medium text-foreground">{company.company}</p>
                        <p className="text-xs text-muted-foreground">{company.status}</p>
                      </div>
                      <span className="text-sm font-medium text-emerald-400">{company.invested}</span>
                    </div>
                  ))}
                </div>
              </EditableSection>
            </>
          )}

          {/* Social Links - Common */}
          <EditableSection
            title="Social Links"
            icon={Link2}
            isEditing={editingSection === "social"}
            onEdit={() => startEditing("social")}
            onSave={saveSection}
            onCancel={cancelEditing}
            editContent={
              <div className="space-y-4">
                <div>
                  <label className="text-sm font-medium text-foreground mb-1.5 block">LinkedIn</label>
                  <Input value={tempProfile.linkedin} onChange={(e) => setTempProfile({ ...tempProfile, linkedin: e.target.value })} className="bg-secondary/30" placeholder="linkedin.com/in/username" />
                </div>
                <div>
                  <label className="text-sm font-medium text-foreground mb-1.5 block">Twitter / X</label>
                  <Input value={tempProfile.twitter} onChange={(e) => setTempProfile({ ...tempProfile, twitter: e.target.value })} className="bg-secondary/30" placeholder="@username" />
                </div>
              </div>
            }
          >
            <div className="flex flex-wrap gap-3">
              <a href={`https://${profile.linkedin}`} target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 px-4 py-2 rounded-xl bg-[#0077B5]/10 text-[#0077B5] hover:bg-[#0077B5]/20 transition-colors text-sm">
                <Linkedin className="h-4 w-4" />LinkedIn
              </a>
              <a href={`https://twitter.com/${profile.twitter.replace('@', '')}`} target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 px-4 py-2 rounded-xl bg-[#1DA1F2]/10 text-[#1DA1F2] hover:bg-[#1DA1F2]/20 transition-colors text-sm">
                <Twitter className="h-4 w-4" />Twitter
              </a>
            </div>
          </EditableSection>

          {/* Appearance */}
          <div className="rounded-2xl glass glass-border p-5">
            <h3 className="font-semibold text-foreground mb-1">Appearance</h3>
            <p className="text-xs text-muted-foreground mb-4">Choose how CheckUrIdea looks to you.</p>
            <ThemeToggle />
          </div>

          {/* More Settings Links */}
          <div className="rounded-2xl glass glass-border p-5">
            <h3 className="font-semibold text-foreground mb-4">More Settings</h3>
            <div className="space-y-2">
              <Link href="/settings/privacy" className="flex items-center gap-3 rounded-xl px-4 py-3 hover:bg-secondary/50 transition-colors">
                <Shield className="h-5 w-5 text-muted-foreground" />
                <span className="text-sm text-foreground">Privacy Settings</span>
              </Link>
              <Link href="/settings/notifications" className="flex items-center gap-3 rounded-xl px-4 py-3 hover:bg-secondary/50 transition-colors">
                <Bell className="h-5 w-5 text-muted-foreground" />
                <span className="text-sm text-foreground">Notification Preferences</span>
              </Link>
            </div>
          </div>
        </main>
      </div>
    </div>
  )
}