import { PublicHeader } from "@/components/profile/public-header"
import { ProfileHeader } from "@/components/profile/profile-header"
import { ProfileTabs } from "@/components/profile/profile-tabs"
import { ProfileActivity } from "@/components/profile/profile-activity"
import { 
  GraduationCap, 
  Briefcase, 
  Award, 
  Globe,
  Linkedin,
  Twitter,
  Mail,
  MapPin,
} from "lucide-react"

// Individual profile - students, professionals, anyone with an idea
const individualData = {
  name: "Khushoo Gupta",
  username: "khushoogupta",
  avatar: "",
  bio: "Final year MBA student passionate about EdTech and sustainability. Building ideas that can make education accessible for everyone. Open to mentorship and collaboration.",
  location: "Mumbai, India",
  website: "https://khushoo.dev",
  joinedDate: "January 2024",
  isVerified: true,
  isPremium: true,
  userType: "individual" as const,
  aiMatchScore: 78,
  stats: {
    ideas: 8,
    followers: 234,
    following: 89,
  },
  badges: ["Top Creator", "Rising Star"],
}

const tabs = [
  { id: "ideas", label: "My Ideas", count: 8 },
  { id: "saved", label: "Saved", count: 12 },
  { id: "activity", label: "Activity" },
]

const activities = [
  {
    id: "1",
    type: "idea" as const,
    title: "AI-powered Vernacular Education App",
    description: "An app that teaches coding concepts in regional languages using AI-generated content and voice assistance.",
    timestamp: "2 hours ago",
    category: "EdTech",
    engagement: { likes: 45, comments: 12 },
  },
  {
    id: "2",
    type: "idea" as const,
    title: "Sustainable Campus Marketplace",
    description: "A platform for students to buy/sell/exchange used books, electronics, and furniture within their campus.",
    timestamp: "1 day ago",
    category: "Sustainability",
    engagement: { likes: 89, comments: 23 },
  },
  {
    id: "3",
    type: "like" as const,
    title: "Mental Health Support for Students",
    timestamp: "2 days ago",
    category: "HealthTech",
    engagement: { likes: 156, comments: 34 },
  },
]

// About Section for Individual
function AboutSection() {
  return (
    <div className="bg-card rounded-xl border border-border/50 p-5 mb-4">
      <h3 className="font-semibold text-foreground mb-4">About</h3>
      
      <div className="flex items-start gap-3 mb-4">
        <div className="w-9 h-9 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
          <GraduationCap className="h-4 w-4 text-primary" />
        </div>
        <div>
          <p className="text-sm font-medium text-foreground">MBA Student</p>
          <p className="text-xs text-muted-foreground">IIM Bangalore - Class of 2024</p>
        </div>
      </div>

      <div className="flex items-start gap-3 mb-4">
        <div className="w-9 h-9 rounded-lg bg-secondary flex items-center justify-center shrink-0">
          <Briefcase className="h-4 w-4 text-muted-foreground" />
        </div>
        <div>
          <p className="text-sm font-medium text-foreground">Marketing Intern</p>
          <p className="text-xs text-muted-foreground">Flipkart - Summer 2023</p>
        </div>
      </div>

      <div className="flex items-start gap-3">
        <div className="w-9 h-9 rounded-lg bg-secondary flex items-center justify-center shrink-0">
          <MapPin className="h-4 w-4 text-muted-foreground" />
        </div>
        <div>
          <p className="text-sm font-medium text-foreground">Mumbai, India</p>
          <p className="text-xs text-muted-foreground">Open to relocate</p>
        </div>
      </div>
    </div>
  )
}

// Skills & Interests
function SkillsSection() {
  const skills = ["Business Strategy", "Market Research", "UI/UX Design", "Data Analysis", "Public Speaking"]
  const interests = ["EdTech", "Sustainability", "Social Impact", "AI/ML"]

  return (
    <div className="bg-card rounded-xl border border-border/50 p-5 mb-4">
      <h3 className="font-semibold text-foreground mb-3">Skills</h3>
      <div className="flex flex-wrap gap-2 mb-4">
        {skills.map((skill) => (
          <span key={skill} className="px-2.5 py-1 rounded-lg bg-secondary text-xs text-foreground">
            {skill}
          </span>
        ))}
      </div>
      
      <h3 className="font-semibold text-foreground mb-3">Interests</h3>
      <div className="flex flex-wrap gap-2">
        {interests.map((interest) => (
          <span key={interest} className="px-2.5 py-1 rounded-lg bg-primary/10 text-xs text-primary border border-primary/20">
            {interest}
          </span>
        ))}
      </div>
    </div>
  )
}

// Achievements
function AchievementsSection() {
  const achievements = [
    { title: "Winner - IIM B-Plan Competition 2023", icon: Award },
    { title: "Featured in Top 10 Ideas - CheckUrIdea", icon: Award },
  ]

  return (
    <div className="bg-card rounded-xl border border-border/50 p-5 mb-4">
      <h3 className="font-semibold text-foreground mb-3">Achievements</h3>
      <div className="space-y-3">
        {achievements.map((item, idx) => (
          <div key={idx} className="flex items-center gap-3">
            <div className="w-8 h-8 rounded-lg bg-amber-500/10 flex items-center justify-center">
              <item.icon className="h-4 w-4 text-amber-500" />
            </div>
            <p className="text-sm text-foreground">{item.title}</p>
          </div>
        ))}
      </div>
    </div>
  )
}

// Social Links
function SocialLinks() {
  return (
    <div className="bg-card rounded-xl border border-border/50 p-5">
      <h3 className="font-semibold text-foreground mb-3">Connect</h3>
      <div className="space-y-2">
        <a href="#" className="flex items-center gap-3 p-2 rounded-lg hover:bg-secondary transition-colors">
          <Linkedin className="h-4 w-4 text-[#0A66C2]" />
          <span className="text-sm text-foreground">LinkedIn</span>
        </a>
        <a href="#" className="flex items-center gap-3 p-2 rounded-lg hover:bg-secondary transition-colors">
          <Twitter className="h-4 w-4 text-muted-foreground" />
          <span className="text-sm text-foreground">Twitter</span>
        </a>
        <a href="#" className="flex items-center gap-3 p-2 rounded-lg hover:bg-secondary transition-colors">
          <Mail className="h-4 w-4 text-muted-foreground" />
          <span className="text-sm text-foreground">Email</span>
        </a>
        <a href="#" className="flex items-center gap-3 p-2 rounded-lg hover:bg-secondary transition-colors">
          <Globe className="h-4 w-4 text-muted-foreground" />
          <span className="text-sm text-foreground">Website</span>
        </a>
      </div>
    </div>
  )
}

export default function IndividualProfilePage() {
  return (
    <div className="min-h-screen bg-background">
      <PublicHeader />
      
      <main className="max-w-5xl mx-auto">
        <ProfileHeader {...individualData} />
        <ProfileTabs tabs={tabs} userType="individual" />

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 p-4 md:p-6">
          {/* Main Content */}
          <div className="lg:col-span-2">
            <div className="bg-card rounded-xl border border-border/50">
              <div className="p-4 border-b border-border/50">
                <h2 className="font-semibold text-foreground">Recent Ideas & Activity</h2>
              </div>
              <ProfileActivity activities={activities} userType="individual" />
            </div>
          </div>

          {/* Sidebar */}
          <div className="lg:col-span-1">
            <AboutSection />
            <SkillsSection />
            <AchievementsSection />
            <SocialLinks />
          </div>
        </div>
      </main>
    </div>
  )
}