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 { cn } from "@/lib/utils"
import { 
  TrendingUp, 
  IndianRupee, 
  Target, 
  PieChart,
  Briefcase,
  GraduationCap,
  Globe,
  Linkedin,
  Twitter,
  Mail,
  Building2,
  CheckCircle
} from "lucide-react"

// Investor profile - Angel investors, VCs, individuals looking to invest
const investorData = {
  name: "Rajesh Kumar",
  username: "rajeshkumar_vc",
  avatar: "",
  bio: "Angel Investor & Venture Partner at Matrix Partners. 15+ years in early-stage investments. Passionate about backing visionary founders in FinTech, HealthTech, and DeepTech.",
  location: "Bengaluru, India",
  website: "https://matrixpartners.in",
  joinedDate: "March 2023",
  isVerified: true,
  isPremium: true,
  userType: "investor" as const,
  aiMatchScore: 92,
  stats: {
    investments: 47,
    followers: 5621,
    following: 189,
  },
  badges: ["Verified Investor", "Top 100 Angels", "Series A Lead"],
}

const tabs = [
  { id: "portfolio", label: "Portfolio", count: 47 },
  { id: "interests", label: "Interested Ideas", count: 23 },
  { id: "activity", label: "Activity" },
]

const activities = [
  {
    id: "1",
    type: "invest" as const,
    title: "AI-powered Healthcare Diagnostics",
    description: "Expressed interest in seed round for AI diagnostic platform targeting rural healthcare.",
    timestamp: "4 hours ago",
    category: "HealthTech",
    engagement: { likes: 67, comments: 18 },
  },
  {
    id: "2",
    type: "like" as const,
    title: "B2B SaaS for Supply Chain Management",
    timestamp: "1 day ago",
    category: "Enterprise SaaS",
    engagement: { likes: 234, comments: 45 },
  },
  {
    id: "3",
    type: "invest" as const,
    title: "Electric Vehicle Charging Network",
    description: "Leading the pre-Series A round for pan-India EV charging infrastructure.",
    timestamp: "3 days ago",
    category: "CleanTech",
    engagement: { likes: 189, comments: 34 },
  },
]

// Investment Stats
function InvestmentStats() {
  const stats = [
    { icon: IndianRupee, label: "Total Invested", value: "Rs 42Cr+", color: "text-emerald-400" },
    { icon: Target, label: "Active Deals", value: "12", color: "text-emerald-400" },
    { icon: TrendingUp, label: "Avg. IRR", value: "34%", color: "text-emerald-400" },
    { icon: PieChart, label: "Exits", value: "8", color: "text-emerald-400" },
  ]

  return (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-4">
      {stats.map((stat) => (
        <div key={stat.label} className="bg-card rounded-xl border border-border/50 p-4">
          <div className="flex items-center gap-2 mb-2">
            <div className="w-8 h-8 rounded-lg bg-emerald-500/10 flex items-center justify-center">
              <stat.icon className={cn("h-4 w-4", stat.color)} />
            </div>
          </div>
          <p className="text-xl font-bold text-foreground">{stat.value}</p>
          <p className="text-xs text-muted-foreground">{stat.label}</p>
        </div>
      ))}
    </div>
  )
}

// Investment Criteria
function InvestmentCriteria() {
  return (
    <div className="bg-card rounded-xl border border-emerald-500/20 bg-emerald-500/5 p-5 mb-4">
      <div className="flex items-center gap-2 mb-4">
        <Target className="h-4 w-4 text-emerald-400" />
        <h3 className="font-semibold text-foreground">Investment Criteria</h3>
      </div>
      
      <div className="grid grid-cols-2 gap-4">
        <div>
          <p className="text-xs text-muted-foreground mb-1">Ticket Size</p>
          <p className="text-sm font-medium text-foreground">Rs 50L - Rs 5Cr</p>
        </div>
        <div>
          <p className="text-xs text-muted-foreground mb-1">Stage</p>
          <p className="text-sm font-medium text-foreground">Seed to Series A</p>
        </div>
        <div>
          <p className="text-xs text-muted-foreground mb-1">Geography</p>
          <p className="text-sm font-medium text-foreground">India, Southeast Asia</p>
        </div>
        <div>
          <p className="text-xs text-muted-foreground mb-1">Decision Time</p>
          <p className="text-sm font-medium text-foreground">2-4 weeks</p>
        </div>
      </div>
    </div>
  )
}

// Investment Focus
function InvestmentFocus() {
  const sectors = [
    { name: "FinTech", percentage: 35 },
    { name: "HealthTech", percentage: 25 },
    { name: "Enterprise SaaS", percentage: 20 },
    { name: "CleanTech", percentage: 12 },
    { name: "Others", percentage: 8 },
  ]

  return (
    <div className="bg-card rounded-xl border border-border/50 p-5 mb-4">
      <h3 className="font-semibold text-foreground mb-4">Sector Focus</h3>
      <div className="space-y-3">
        {sectors.map((sector) => (
          <div key={sector.name}>
            <div className="flex justify-between text-sm mb-1">
              <span className="text-foreground">{sector.name}</span>
              <span className="text-muted-foreground">{sector.percentage}%</span>
            </div>
            <div className="h-1.5 bg-secondary rounded-full overflow-hidden">
              <div 
                className="h-full bg-emerald-500 rounded-full transition-all"
                style={{ width: `${sector.percentage}%` }}
              />
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

// Background Section
function BackgroundSection() {
  return (
    <div className="bg-card rounded-xl border border-border/50 p-5 mb-4">
      <h3 className="font-semibold text-foreground mb-4">Background</h3>
      
      <div className="space-y-4">
        <div className="flex items-start gap-3">
          <div className="w-9 h-9 rounded-lg bg-emerald-500/10 flex items-center justify-center shrink-0">
            <Briefcase className="h-4 w-4 text-emerald-400" />
          </div>
          <div>
            <p className="text-sm font-medium text-foreground">Venture Partner</p>
            <p className="text-xs text-muted-foreground">Matrix Partners India - 2020 to Present</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">
            <Building2 className="h-4 w-4 text-muted-foreground" />
          </div>
          <div>
            <p className="text-sm font-medium text-foreground">Director of Strategy</p>
            <p className="text-xs text-muted-foreground">Flipkart - 2012 to 2020</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">
            <GraduationCap className="h-4 w-4 text-muted-foreground" />
          </div>
          <div>
            <p className="text-sm font-medium text-foreground">MBA</p>
            <p className="text-xs text-muted-foreground">Harvard Business School - 2012</p>
          </div>
        </div>
      </div>
    </div>
  )
}

// Portfolio Highlights
function PortfolioHighlights() {
  const portfolio = [
    { name: "HealthKart", status: "Exited", return: "8x" },
    { name: "Razorpay", status: "Active", return: "12x" },
    { name: "Lenskart", status: "Active", return: "6x" },
  ]

  return (
    <div className="bg-card rounded-xl border border-border/50 p-5 mb-4">
      <h3 className="font-semibold text-foreground mb-4">Portfolio Highlights</h3>
      <div className="space-y-3">
        {portfolio.map((item, idx) => (
          <div key={idx} className="flex items-center justify-between p-3 rounded-lg bg-secondary/50">
            <div className="flex items-center gap-3">
              <div className="w-8 h-8 rounded-lg bg-secondary flex items-center justify-center text-xs font-bold text-muted-foreground">
                {item.name.charAt(0)}
              </div>
              <div>
                <p className="text-sm font-medium text-foreground">{item.name}</p>
                <p className="text-xs text-muted-foreground flex items-center gap-1">
                  {item.status === "Exited" ? (
                    <CheckCircle className="h-3 w-3 text-emerald-400" />
                  ) : (
                    <TrendingUp className="h-3 w-3 text-primary" />
                  )}
                  {item.status}
                </p>
              </div>
            </div>
            <span className="text-sm font-bold text-emerald-400">{item.return}</span>
          </div>
        ))}
      </div>
    </div>
  )
}

// Contact Section
function ContactSection() {
  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">investments@matrix.in</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">matrixpartners.in</span>
        </a>
      </div>
    </div>
  )
}

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

        <div className="p-4 md:p-6">
          <InvestmentStats />

          <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
            {/* Main Content */}
            <div className="lg:col-span-2">
              <InvestmentCriteria />
              <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 Activity</h2>
                </div>
                <ProfileActivity activities={activities} userType="investor" />
              </div>
            </div>

            {/* Sidebar */}
            <div className="lg:col-span-1">
              <InvestmentFocus />
              <BackgroundSection />
              <PortfolioHighlights />
              <ContactSection />
            </div>
          </div>
        </div>
      </main>
    </div>
  )
}