import { useState, useEffect } from "react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Progress } from "@/components/ui/progress";
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
import {
  Menu, ArrowRight, Mail, Linkedin, Github, Twitter, Download,
  ExternalLink, MapPin, Calendar, Briefcase, GraduationCap, Award,
  Figma, Globe, Database, Terminal, Layers, Cpu, Send, CheckCircle
} from "lucide-react";
import { ThemeToggle } from "@/components/ThemeToggle";
import { useSaasMutation } from "@/hooks/use-tygarun";

export default function ResumePage() {
  const { mutate: createLead, loading: sending } = useSaasMutation("crm", "/leads");
  const [mobileOpen, setMobileOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const navLinks = [
    { label: "Experience", href: "#experience" },
    { label: "Education", href: "#education" },
    { label: "Skills", href: "#skills" },
    { label: "Contact", href: "#contact" },
  ];

  const certifications = [
    { name: "AWS Solutions Architect", issuer: "Amazon Web Services", year: "2024" },
    { name: "Google Cloud Professional", issuer: "Google Cloud", year: "2023" },
    { name: "PMP Certified", issuer: "Project Management Institute", year: "2022" },
  ];

  const experience = [
    {
      company: "Stripe", role: "Senior Software Engineer", dates: "2022 – Present",
      bullets: ["Led the redesign of the merchant dashboard serving 2M+ users, improving task completion by 35%.", "Architected a real-time analytics pipeline processing 500K events per second.", "Mentored a team of 6 engineers and established code review best practices."],
    },
    {
      company: "Vercel", role: "Software Engineer", dates: "2020 – 2022",
      bullets: ["Built core deployment infrastructure handling 10M+ builds per month.", "Shipped the Edge Functions runtime adopted by 50K+ projects in first quarter."],
    },
    {
      company: "Airbnb", role: "Frontend Engineer", dates: "2018 – 2020",
      bullets: ["Developed the new search experience increasing booking conversion by 18%.", "Created a shared component library used across 12 product teams."],
    },
    {
      company: "Freelance", role: "Web Developer", dates: "2016 – 2018",
      bullets: ["Delivered 30+ client projects ranging from e-commerce to SaaS dashboards.", "Achieved a 100% on-time delivery rate with 5-star average client rating."],
    },
  ];

  const projects = [
    { title: "FinTrack Dashboard", desc: "Real-time financial analytics platform with interactive charts and alerts.", tags: ["React", "TypeScript", "D3.js"], gradient: "from-violet-500 to-indigo-600" },
    { title: "MedConnect", desc: "Telemedicine platform connecting patients with specialists worldwide.", tags: ["Next.js", "Prisma", "WebRTC"], gradient: "from-rose-500 to-orange-500" },
    { title: "EcoShop", desc: "Sustainable e-commerce marketplace with carbon-neutral shipping tracker.", tags: ["Remix", "Stripe", "PostgreSQL"], gradient: "from-emerald-500 to-teal-500" },
  ];

  const technicalSkills = [
    { name: "React / Next.js", value: 95 },
    { name: "TypeScript", value: 90 },
    { name: "Node.js", value: 85 },
    { name: "Python", value: 88 },
    { name: "PostgreSQL", value: 80 },
    { name: "AWS / Cloud", value: 75 },
  ];

  const tools = [
    { icon: Figma, label: "Figma" },
    { icon: Globe, label: "Vercel" },
    { icon: Database, label: "Supabase" },
    { icon: Terminal, label: "Docker" },
    { icon: Layers, label: "Terraform" },
    { icon: Cpu, label: "GitHub" },
  ];

  return (
    <div className="min-h-screen bg-background text-foreground antialiased">
      {/* ── HEADER ── */}
      <header
        className={`fixed top-0 inset-x-0 z-50 transition-all duration-300 \${
          scrolled
            ? "bg-background/95 backdrop-blur-lg border-b shadow-sm"
            : "bg-transparent"
        }`}
      >
        <div className="mx-auto max-w-5xl flex items-center justify-between px-6 py-4">
          <a href="/" className="text-lg font-bold tracking-tight">
            Taylor Morgan
          </a>
          <div className="hidden md:flex items-center gap-8">
            <nav className="flex items-center gap-8">
              {navLinks.map((l) => (
                <a
                  key={l.href}
                  href={l.href}
                  className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                >
                  {l.label}
                </a>
              ))}
            </nav>
            <ThemeToggle />
          </div>
          <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
            <SheetTrigger asChild className="md:hidden">
              <Button variant="ghost" size="icon"><Menu className="h-5 w-5" /></Button>
            </SheetTrigger>
            <SheetContent side="right" className="w-72">
              <nav className="mt-8 flex flex-col gap-4">
                {navLinks.map((l) => (
                  <a key={l.href} href={l.href} className="text-lg font-medium" onClick={() => setMobileOpen(false)}>
                    {l.label}
                  </a>
                ))}
                <ThemeToggle />
              </nav>
            </SheetContent>
          </Sheet>
        </div>
      </header>

      {/* ── HERO ── */}
      <section className="relative pt-32 pb-24 overflow-hidden">
        <div className="absolute inset-0 pointer-events-none">
          <div className="absolute top-1/4 right-1/4 w-80 h-80 rounded-full bg-primary/8 blur-[100px]" />
          <div className="absolute bottom-0 left-1/3 w-64 h-64 rounded-full bg-violet-500/6 blur-[80px]" />
        </div>
        <div className="relative z-10 mx-auto max-w-5xl px-6">
          <div className="flex flex-col sm:flex-row items-center sm:items-start gap-8 animate-fade-up">
            <div className="relative w-32 h-32 shrink-0">
              <div className="absolute inset-0 rounded-full bg-gradient-to-br from-primary via-violet-500 to-rose-500 shadow-xl ring-4 ring-primary/20 animate-pulse" />
              <div className="absolute inset-0 rounded-full opacity-20" style={{ backgroundImage: "radial-gradient(circle, currentColor 1px, transparent 1px)", backgroundSize: "8px 8px" }} />
              <div className="absolute bottom-2 right-2 w-4 h-4 rounded-full bg-emerald-500 ring-2 ring-background" />
              <div className="absolute -bottom-1 -left-1 w-3 h-3 rounded-full bg-violet-400 border-2 border-background" />
            </div>
            <div className="text-center sm:text-left">
              <h1 className="text-5xl md:text-7xl font-black tracking-tighter leading-[1.05]">
                Taylor Morgan
              </h1>
              <p className="mt-3 text-xl text-muted-foreground leading-relaxed">Senior Full-Stack Engineer</p>
              <p className="mt-4 text-muted-foreground leading-relaxed max-w-lg">
                Passionate engineer with 8+ years building scalable web applications. I love clean architecture, great UX, and shipping products that make a difference.
              </p>
              <div className="mt-6 flex flex-wrap items-center justify-center sm:justify-start gap-3">
                <Button variant="outline" size="icon" asChild className="hover:text-primary hover:scale-110 transition-all">
                  <a href="mailto:taylor@example.com"><Mail className="h-4 w-4" /></a>
                </Button>
                <Button variant="outline" size="icon" asChild className="hover:text-primary hover:scale-110 transition-all">
                  <a href="#"><Linkedin className="h-4 w-4" /></a>
                </Button>
                <Button variant="outline" size="icon" asChild className="hover:text-primary hover:scale-110 transition-all">
                  <a href="#"><Github className="h-4 w-4" /></a>
                </Button>
                <Button className="ml-2">
                  <Download className="mr-2 h-4 w-4" /> Download CV
                </Button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ── EXPERIENCE ── */}
      <section id="experience" className="py-24">
        <div className="mx-auto max-w-5xl px-6">
          <div className="flex items-center gap-3 mb-12 animate-fade-up">
            <Briefcase className="h-6 w-6 text-primary" />
            <h2 className="text-3xl sm:text-4xl font-bold tracking-tight">Experience</h2>
          </div>
          <div className="relative border-l-2 border-primary/20 ml-4">
            {experience.map((job, i) => (
              <div
                key={i}
                className={`relative pl-8 pb-12 last:pb-0 rounded-lg hover:bg-muted/50 transition-colors \${i % 2 === 1 ? "bg-muted/30 -ml-4 pl-12 py-8 rounded-r-xl" : ""}`}
              >
                <div className="absolute -left-[9px] top-1 w-4 h-4 rounded-full bg-primary ring-4 ring-primary/20 border-2 border-background" />
                <div className="flex flex-wrap items-center gap-3 mb-2">
                  <h3 className="font-semibold text-lg">{job.company}</h3>
                  <Badge variant="outline" className="text-xs">{job.dates}</Badge>
                </div>
                <p className="text-primary font-medium text-sm mb-3">{job.role}</p>
                <ul className="space-y-1.5 border-l-2 border-primary/10 pl-3">
                  {job.bullets.map((b, j) => (
                    <li key={j} className="text-sm text-muted-foreground flex items-start gap-2">
                      <span className="mt-1.5 w-1.5 h-1.5 rounded-full bg-primary/40 shrink-0" />
                      {b}
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── PROJECTS ── */}
      <section className="py-24 bg-muted/30">
        <div className="mx-auto max-w-5xl px-6">
          <div className="flex items-center gap-3 mb-12 animate-fade-up">
            <Layers className="h-6 w-6 text-primary" />
            <h2 className="text-3xl sm:text-4xl font-bold tracking-tight">Featured Projects</h2>
          </div>
          <div className="grid md:grid-cols-3 gap-6 stagger">
            {projects.map((p, i) => (
              <Card key={i} className="group overflow-hidden hover-lift hover:shadow-lg transition-all duration-300 backdrop-blur-sm bg-card/80 border-border/50">
                <div className={`aspect-video bg-gradient-to-br \${p.gradient} rounded-t-xl flex items-center justify-center relative overflow-hidden`}>
                  <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-24 h-24 rounded-full bg-white/10 blur-2xl" />
                  <div className="w-12 h-12 rounded-xl bg-white/20 backdrop-blur group-hover:scale-110 transition-transform relative z-10" />
                </div>
                <CardHeader className="pb-2">
                  <CardTitle className="text-base">{p.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <CardDescription className="text-sm leading-relaxed mb-3">{p.desc}</CardDescription>
                  <div className="flex flex-wrap gap-1.5 mb-3">
                    {p.tags.map((tag, j) => (
                      <Badge key={j} variant="secondary" className="text-xs">{tag}</Badge>
                    ))}
                  </div>
                  <a href="#" className="inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:gap-3 transition-all">
                    View Project <ArrowRight className="h-3.5 w-3.5" />
                  </a>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* ── EDUCATION ── */}
      <section id="education" className="py-24">
        <div className="mx-auto max-w-5xl px-6">
          <div className="flex items-center gap-3 mb-12 animate-fade-up">
            <GraduationCap className="h-6 w-6 text-primary" />
            <h2 className="text-3xl sm:text-4xl font-bold tracking-tight">Education</h2>
          </div>
          <div className="grid sm:grid-cols-2 gap-6 mb-10">
            <Card className="hover-lift hover:shadow-md transition-shadow backdrop-blur-sm bg-card/80">
              <CardHeader>
                <CardTitle className="text-base flex items-center gap-2">
                  <GraduationCap className="h-4 w-4 text-primary" /> Stanford University
                </CardTitle>
                <CardDescription className="text-muted-foreground leading-relaxed">M.S. Computer Science</CardDescription>
              </CardHeader>
              <CardContent className="flex flex-wrap items-center gap-2">
                <Badge variant="outline" className="text-xs">2014 – 2016</Badge>
                <Badge className="text-xs">With Distinction</Badge>
              </CardContent>
            </Card>
            <Card className="hover-lift hover:shadow-md transition-shadow backdrop-blur-sm bg-card/80">
              <CardHeader>
                <CardTitle className="text-base flex items-center gap-2">
                  <GraduationCap className="h-4 w-4 text-primary" /> UC Berkeley
                </CardTitle>
                <CardDescription className="text-muted-foreground leading-relaxed">B.S. Computer Science</CardDescription>
              </CardHeader>
              <CardContent className="flex flex-wrap items-center gap-2">
                <Badge variant="outline" className="text-xs">2010 – 2014</Badge>
                <Badge className="text-xs">Magna Cum Laude</Badge>
              </CardContent>
            </Card>
          </div>
          <div>
            <h3 className="font-semibold mb-3 flex items-center gap-2">
              <Award className="h-5 w-5 text-primary" /> Certifications
            </h3>
            <div className="flex flex-wrap gap-2">
              {["AWS Solutions Architect", "Google Cloud Professional", "PMP Certified"].map((cert, i) => (
                <Badge key={i} variant="secondary" className="px-3 py-1">{cert}</Badge>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ── SKILLS ── */}
      <section id="skills" className="py-24 bg-muted/30">
        <div className="mx-auto max-w-5xl px-6">
          <h2 className="text-3xl sm:text-4xl font-bold tracking-tight mb-12 animate-fade-up">Skills & Tools</h2>
          <div className="grid lg:grid-cols-3 gap-12">
            {/* Technical */}
            <div className="lg:col-span-1">
              <h3 className="font-semibold mb-6 flex items-center gap-2 text-sm uppercase tracking-wider text-muted-foreground">
                <Terminal className="h-4 w-4 text-primary" /> Development
              </h3>
              <div className="space-y-5">
                {technicalSkills.map((s, i) => (
                  <div key={i}>
                    <div className="flex justify-between mb-1.5">
                      <span className="text-sm font-medium">{s.name}</span>
                      <span className="text-xs text-muted-foreground tabular-nums">{s.value}%</span>
                    </div>
                    <div className="h-2 rounded-full bg-muted overflow-hidden">
                      <div className="h-full rounded-full bg-gradient-to-r from-primary via-violet-500 to-rose-500 transition-all duration-500" style={{ width: `\${s.value}%` }} />
                    </div>
                  </div>
                ))}
              </div>
            </div>
            {/* Soft Skills + Tools */}
            <div className="lg:col-span-2 space-y-10">
              <div>
                <h3 className="font-semibold mb-4 flex items-center gap-2 text-sm uppercase tracking-wider text-muted-foreground">
                  <Figma className="h-4 w-4 text-primary" /> Design & Soft Skills
                </h3>
                <div className="flex flex-wrap gap-2">
                  {["Leadership", "Communication", "Problem Solving", "Mentoring"].map((s, i) => (
                    <Badge key={i} variant="outline" className="px-4 py-1.5 text-sm">{s}</Badge>
                  ))}
                </div>
              </div>
              <div>
                <h3 className="font-semibold mb-4 text-sm uppercase tracking-wider text-muted-foreground">Tools & Platforms</h3>
                <div className="grid grid-cols-3 sm:grid-cols-6 gap-4 stagger">
                  {tools.map((t, i) => (
                    <div key={i} className="flex flex-col items-center gap-2 p-3 rounded-xl bg-background border hover:border-primary/40 hover:shadow-sm transition-all">
                      <t.icon className="h-5 w-5 text-muted-foreground" />
                      <span className="text-xs font-medium text-center">{t.label}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ── CERTIFICATIONS ── */}
      <section className="py-24">
        <div className="mx-auto max-w-5xl px-6">
          <div className="flex items-center gap-3 mb-12 animate-fade-up">
            <Award className="h-6 w-6 text-primary" />
            <h2 className="text-3xl sm:text-4xl font-bold tracking-tight">Certifications & Awards</h2>
          </div>
          <div className="grid sm:grid-cols-3 gap-6 stagger">
            {certifications.map((c, i) => (
              <Card key={i} className="hover-lift hover:shadow-lg hover:shadow-primary/5 transition-all backdrop-blur-sm bg-card/80 border-border/50">
                <CardHeader className="flex flex-row items-start gap-4">
                  <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-primary/20 to-violet-500/20 flex items-center justify-center shrink-0">
                    <Award className="h-6 w-6 text-primary" />
                  </div>
                  <div>
                    <CardTitle className="text-base flex items-center gap-1.5">
                      {c.name} <CheckCircle className="h-4 w-4 text-emerald-500" />
                    </CardTitle>
                    <CardDescription className="text-muted-foreground leading-relaxed">{c.issuer}</CardDescription>
                  </div>
                </CardHeader>
                <CardContent>
                  <Badge variant="outline" className="text-xs">{c.year}</Badge>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* ── CONTACT ── */}
      <section id="contact" className="py-24">
        <div className="mx-auto max-w-xl px-6 text-center">
          <h2 className="text-3xl sm:text-4xl font-bold tracking-tight mb-2 animate-fade-up">Let's Connect</h2>
          <p className="text-muted-foreground leading-relaxed mb-2">Have a project in mind? I’d love to hear from you.</p>
          <a href="mailto:taylor@example.com" className="inline-flex items-center gap-2 text-primary font-medium hover:underline">
            <Mail className="h-4 w-4 shadow-lg shadow-primary/10" /> taylor@example.com
          </a>
          <Card className="mt-8 backdrop-blur-sm bg-card/80 border-border/50">
            <CardContent className="pt-6">
              <form onSubmit={async (e) => {
                e.preventDefault();
                const form = e.currentTarget;
                const fd = new FormData(form);
                try {
                  await createLead({ name: fd.get("name"), email: fd.get("email"), message: fd.get("message") });
                  toast.success("Message sent! I'll get back to you within 24 hours.");
                  form.reset();
                } catch (err) {
                  toast.error("Something went wrong. Please try again.");
                }
              }} className="text-left space-y-4">
                <Input name="name" placeholder="Your Name" className="h-11" required />
                <Input name="email" placeholder="Your Email" type="email" className="h-11" required />
                <Textarea name="message" placeholder="Your message..." className="min-h-[120px] resize-none" required />
                <Button type="submit" disabled={sending} className="w-full h-11 active:scale-[0.97] transition-transform">
                  <Send className="mr-2 h-4 w-4" /> {sending ? "Sending..." : "Send Message"}
                </Button>
                <p className="text-xs text-muted-foreground text-center">Typically responds within 24 hours</p>
              </form>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* ── FOOTER ── */}
      <footer className="py-12 border-t">
        <div className="mx-auto max-w-5xl px-6 text-center">
          <p className="text-muted-foreground mb-4">Let's build something great together.</p>
          <div className="flex justify-center gap-2 mb-6">
            {[Github, Linkedin, Twitter, Mail].map((Icon, i) => (
              <Button key={i} variant="ghost" size="icon" className="h-9 w-9 text-muted-foreground hover:text-foreground">
                <Icon className="h-4 w-4" />
              </Button>
            ))}
          </div>
          <p className="text-sm text-muted-foreground">© 2026 Taylor Morgan. All rights reserved.</p>
        </div>
      </footer>
    </div>
  );
}