import { DashboardLayout } from "@/components/layout/sidebar";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { 
  Target, 
  TrendingUp, 
  Heart, 
  Plane, 
  DollarSign, 
  Briefcase,
  Smartphone,
  Rocket,
  CheckCircle2,
  ArrowRight,
  Flame,
  Clock,
  ExternalLink,
} from "lucide-react";
import { 
  fetchMissionProgress, 
  ProgressMetric, 
  Milestone, 
  NextStep 
} from "@/lib/data/mission";

// Revalidate every 5 minutes
export const revalidate = 300;

// ============================================================================
// Progress Bar Component
// ============================================================================

function ProgressBar({ metric }: { metric: ProgressMetric }) {
  const IconComponent = {
    Target,
    Smartphone,
    DollarSign,
    Plane,
    Briefcase,
    Heart,
    TrendingUp,
  }[metric.icon] || Target;

  const formattedCurrent = metric.unit === "MRR" || metric.unit === "saved"
    ? new Intl.NumberFormat("en-US", {
        style: "currency",
        currency: "USD",
        maximumFractionDigits: 0,
      }).format(metric.current)
    : metric.current;

  const formattedTarget = metric.unit === "MRR" || metric.unit === "saved"
    ? new Intl.NumberFormat("en-US", {
        style: "currency",
        currency: "USD",
        maximumFractionDigits: 0,
      }).format(metric.target)
    : metric.target;

  return (
    <Card className="relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300">
      {/* Background glow effect */}
      <div className={`absolute inset-0 bg-gradient-to-br ${metric.color} opacity-5 group-hover:opacity-10 transition-opacity`} />
      
      <CardContent className="p-6 relative z-10">
        <div className="flex items-start justify-between mb-4">
          <div className="flex items-center gap-3">
            <div className={`w-12 h-12 rounded-xl bg-gradient-to-br ${metric.color} flex items-center justify-center shadow-lg`}>
              <IconComponent className="w-6 h-6 text-white" />
            </div>
            <div>
              <h3 className="font-bold text-lg">{metric.label}</h3>
              <p className="text-sm text-muted-foreground">
                {formattedCurrent} / {formattedTarget} {metric.unit}
              </p>
            </div>
          </div>
          <div className="text-right">
            <span className={`text-3xl font-bold bg-gradient-to-r ${metric.color} bg-clip-text text-transparent`}>
              {metric.percentage}%
            </span>
          </div>
        </div>

        {/* Progress bar */}
        <div className="relative">
          <div className="h-4 bg-secondary/50 rounded-full overflow-hidden">
            <div 
              className={`h-full bg-gradient-to-r ${metric.color} rounded-full transition-all duration-1000 ease-out relative`}
              style={{ width: `${metric.percentage}%` }}
            >
              {/* Shine effect */}
              <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent animate-shimmer" />
            </div>
          </div>
          
          {/* Milestone markers */}
          <div className="flex justify-between mt-2 text-xs text-muted-foreground">
            <span>Start</span>
            <span>25%</span>
            <span>50%</span>
            <span>75%</span>
            <span>Goal</span>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

// ============================================================================
// Milestone Timeline Component
// ============================================================================

function MilestoneTimeline({ milestones }: { milestones: Milestone[] }) {
  if (milestones.length === 0) {
    return (
      <Card className="bg-muted/50">
        <CardContent className="p-8 text-center">
          <Rocket className="w-12 h-12 mx-auto text-muted-foreground mb-4" />
          <h3 className="font-semibold text-lg mb-2">No Milestones Yet</h3>
          <p className="text-muted-foreground">
            Complete tasks tagged with &quot;milestone&quot; or &quot;mission&quot; to see your achievements here!
          </p>
        </CardContent>
      </Card>
    );
  }

  const categoryColors: Record<Milestone["category"], string> = {
    ios: "bg-blue-500",
    financial: "bg-amber-500",
    travel: "bg-purple-500",
    family: "bg-pink-500",
    business: "bg-emerald-500",
  };

  const categoryLabels: Record<Milestone["category"], string> = {
    ios: "iOS",
    financial: "Financial",
    travel: "Travel",
    family: "Family",
    business: "Business",
  };

  const IconComponents: Record<string, React.ComponentType<{ className?: string }>> = {
    Smartphone,
    DollarSign,
    Plane,
    Heart,
    Briefcase,
  };

  return (
    <div className="relative">
      {/* Timeline line */}
      <div className="absolute left-6 top-0 bottom-0 w-0.5 bg-gradient-to-b from-primary via-primary/50 to-transparent" />
      
      <div className="space-y-4">
        {milestones.map((milestone, index) => {
          const IconComponent = IconComponents[milestone.icon] || CheckCircle2;
          const completedDate = new Date(milestone.completedAt).toLocaleDateString("en-US", {
            month: "short",
            day: "numeric",
            year: "numeric",
          });

          return (
            <div 
              key={milestone.id} 
              className="relative flex gap-4 group animate-fade-in"
              style={{ animationDelay: `${index * 100}ms` }}
            >
              {/* Timeline dot */}
              <div className={`w-12 h-12 rounded-full ${categoryColors[milestone.category]} flex items-center justify-center shrink-0 shadow-lg z-10 group-hover:scale-110 transition-transform`}>
                <IconComponent className="w-5 h-5 text-white" />
              </div>
              
              {/* Content */}
              <Card className="flex-1 group-hover:shadow-md transition-shadow">
                <CardContent className="p-4">
                  <div className="flex flex-wrap items-center gap-2 mb-1">
                    <Badge className={`${categoryColors[milestone.category]}/10 text-${categoryColors[milestone.category].replace("bg-", "")}`}>
                      {categoryLabels[milestone.category]}
                    </Badge>
                    <span className="text-xs text-muted-foreground flex items-center gap-1">
                      <CheckCircle2 className="w-3 h-3" />
                      {completedDate}
                    </span>
                  </div>
                  <h4 className="font-semibold">{milestone.title}</h4>
                  {milestone.description && (
                    <p className="text-sm text-muted-foreground mt-1">
                      {milestone.description}
                    </p>
                  )}
                </CardContent>
              </Card>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ============================================================================
// Next Steps Component
// ============================================================================

function NextSteps({ steps }: { steps: NextStep[] }) {
  if (steps.length === 0) {
    return (
      <Card className="bg-muted/50">
        <CardContent className="p-8 text-center">
          <CheckCircle2 className="w-12 h-12 mx-auto text-green-500 mb-4" />
          <h3 className="font-semibold text-lg mb-2">All Caught Up!</h3>
          <p className="text-muted-foreground">
            No high priority tasks. Time to set new goals!
          </p>
        </CardContent>
      </Card>
    );
  }

  return (
    <div className="space-y-3">
      {steps.map((step, index) => (
        <a 
          key={step.id}
          href={step.ganttBoardUrl}
          target="_blank"
          rel="noopener noreferrer"
          className="block group"
        >
          <Card className="group-hover:border-primary/50 group-hover:shadow-md transition-all">
            <CardContent className="p-4">
              <div className="flex items-start gap-3">
                {/* Priority indicator */}
                <div className={`w-1 h-full min-h-[40px] rounded-full ${
                  step.priority === "urgent" ? "bg-red-500" : "bg-orange-500"
                }`} />
                
                <div className="flex-1 min-w-0">
                  <div className="flex flex-wrap items-center gap-2 mb-1">
                    <Badge 
                      variant={step.priority === "urgent" ? "destructive" : "default"}
                      className="text-xs"
                    >
                      {step.priority === "urgent" ? (
                        <><Flame className="w-3 h-3 mr-1" /> Urgent</>
                      ) : (
                        "High Priority"
                      )}
                    </Badge>
                    {step.projectName && (
                      <span className="text-xs text-muted-foreground">
                        {step.projectName}
                      </span>
                    )}
                  </div>
                  <h4 className="font-medium truncate group-hover:text-primary transition-colors">
                    {step.title}
                  </h4>
                  {step.dueDate && (
                    <p className="text-xs text-muted-foreground mt-1 flex items-center gap-1">
                      <Clock className="w-3 h-3" />
                      Due {new Date(step.dueDate).toLocaleDateString("en-US", {
                        month: "short",
                        day: "numeric",
                      })}
                    </p>
                  )}
                </div>
                
                <ExternalLink className="w-4 h-4 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity" />
              </div>
            </CardContent>
          </Card>
        </a>
      ))}
    </div>
  );
}

// ============================================================================
// Main Page Component
// ============================================================================

export default async function MissionPage() {
  const progress = await fetchMissionProgress();

  return (
    <DashboardLayout>
      <div className="space-y-8">
        {/* Header */}
        <div className="text-center sm:text-left">
          <h1 className="text-3xl sm:text-4xl font-bold tracking-tight">
            <span className="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 bg-clip-text text-transparent">
              The Mission
            </span>
          </h1>
          <p className="text-muted-foreground mt-2 text-lg">
            Build an iOS empire → retire on our terms → travel with Heidi → 53 is just the start
          </p>
        </div>

        {/* Mission Statement Card */}
        <Card className="relative overflow-hidden">
          <div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 via-purple-500/10 to-pink-500/10" />
          <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-blue-500/20 via-transparent to-transparent" />
          <CardContent className="p-6 sm:p-8 relative z-10">
            <div className="flex flex-col sm:flex-row items-center gap-6">
              <div className="w-20 h-20 rounded-2xl bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center shadow-xl shrink-0">
                <Rocket className="w-10 h-10 text-white" />
              </div>
              <div className="text-center sm:text-left">
                <h2 className="text-xl sm:text-2xl font-bold mb-2">Why We Do What We Do</h2>
                <p className="text-muted-foreground text-lg leading-relaxed max-w-2xl">
                  Build a sustainable side hustle through iOS apps to achieve financial independence, 
                  travel with Heidi, take care of family, and retire on my own terms — all while 
                  staying healthy and having fun.
                </p>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Progress Dashboard */}
        <section>
          <div className="flex items-center gap-3 mb-6">
            <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-emerald-500 to-teal-600 flex items-center justify-center">
              <TrendingUp className="w-5 h-5 text-white" />
            </div>
            <div>
              <h2 className="text-2xl font-bold">Progress Dashboard</h2>
              <p className="text-sm text-muted-foreground">
                Tracking the journey to freedom
              </p>
            </div>
          </div>
          
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
            <ProgressBar metric={progress.retirement} />
            <ProgressBar metric={progress.iosPortfolio} />
            <ProgressBar metric={progress.sideHustleRevenue} />
            <ProgressBar metric={progress.travelFund} />
          </div>
        </section>

        {/* Two Column Layout: Milestones & Next Steps */}
        <div className="grid grid-cols-1 xl:grid-cols-2 gap-8">
          {/* Milestones Timeline */}
          <section>
            <div className="flex items-center gap-3 mb-6">
              <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-amber-500 to-orange-600 flex items-center justify-center">
                <CheckCircle2 className="w-5 h-5 text-white" />
              </div>
              <div className="flex-1">
                <h2 className="text-2xl font-bold">Milestones Achieved</h2>
                <p className="text-sm text-muted-foreground">
                  {progress.milestones.length} completed
                </p>
              </div>
            </div>
            <MilestoneTimeline milestones={progress.milestones} />
          </section>

          {/* Next Steps */}
          <section>
            <div className="flex items-center gap-3 mb-6">
              <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-red-500 to-pink-600 flex items-center justify-center">
                <Flame className="w-5 h-5 text-white" />
              </div>
              <div className="flex-1">
                <h2 className="text-2xl font-bold">Next Steps</h2>
                <p className="text-sm text-muted-foreground">
                  High priority mission tasks
                </p>
              </div>
              <Button variant="outline" size="sm" asChild>
                <a href="https://gantt-board.vercel.app" target="_blank" rel="noopener noreferrer">
                  View All <ArrowRight className="w-4 h-4 ml-1" />
                </a>
              </Button>
            </div>
            <NextSteps steps={progress.nextSteps} />
          </section>
        </div>

        {/* Core Values */}
        <section>
          <h2 className="text-xl font-bold mb-4">Core Values</h2>
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
            {[
              { name: "Family", icon: Heart, color: "from-pink-500 to-rose-500", desc: "Priority #1" },
              { name: "Health", icon: Target, color: "from-green-500 to-emerald-500", desc: "Stay strong" },
              { name: "Fun", icon: Rocket, color: "from-blue-500 to-cyan-500", desc: "Enjoy the ride" },
              { name: "Adventure", icon: Plane, color: "from-purple-500 to-violet-500", desc: "Explore more" },
            ].map((value) => (
              <Card key={value.name} className="group hover:scale-105 transition-transform">
                <CardContent className="p-4 text-center">
                  <div className={`w-12 h-12 rounded-full bg-gradient-to-br ${value.color} flex items-center justify-center mx-auto mb-3 shadow-lg group-hover:shadow-xl transition-shadow`}>
                    <value.icon className="w-6 h-6 text-white" />
                  </div>
                  <h3 className="font-bold">{value.name}</h3>
                  <p className="text-xs text-muted-foreground">{value.desc}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </section>

        {/* Quote */}
        <Card className="bg-gradient-to-r from-slate-800 to-slate-900 border-0 relative overflow-hidden">
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-blue-500/10 via-transparent to-transparent" />
          <CardContent className="p-8 text-center relative z-10">
            <p className="text-xl sm:text-2xl italic text-slate-300 font-light">
              &ldquo;53 is just the start of the best chapter.&rdquo;
            </p>
            <p className="text-sm text-slate-500 mt-3">— The Mission</p>
          </CardContent>
        </Card>
      </div>
    </DashboardLayout>
  );
}
