import { DashboardLayout } from "@/components/layout/sidebar";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Target, TrendingUp, Heart, Plane, DollarSign, Briefcase } from "lucide-react";

const missionStatement = {
  title: "The Mission",
  description: "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.",
};

const coreValues = [
  { name: "Family", icon: Heart, description: "Priority #1 — take care of loved ones" },
  { name: "Health", icon: Target, description: "Stay fit, strong, and mobile" },
  { name: "Fun", icon: TrendingUp, description: "Enjoy the journey, not just the destination" },
  { name: "Adventure", icon: Plane, description: "Travel and experience new things" },
];

const goals = [
  {
    id: 1,
    title: "Double Retirement Savings",
    current: 50,
    target: 100,
    unit: "%",
    category: "financial",
    deadline: "Ongoing",
    status: "in-progress",
  },
  {
    id: 2,
    title: "Build iOS App Empire",
    current: 6,
    target: 20,
    unit: "apps",
    category: "business",
    deadline: "2027",
    status: "in-progress",
  },
  {
    id: 3,
    title: "Replace Contract Income",
    current: 5,
    target: 100,
    unit: "%",
    category: "financial",
    deadline: "2027",
    status: "in-progress",
  },
  {
    id: 4,
    title: "Travel with Heidi",
    current: 0,
    target: 10,
    unit: "countries",
    category: "adventure",
    deadline: "2028",
    status: "not-started",
  },
  {
    id: 5,
    title: "Family Trip with Mom",
    current: 0,
    target: 1,
    unit: "trip",
    category: "family",
    deadline: "2026",
    status: "planning",
  },
  {
    id: 6,
    title: "Milestone Birthday Trip",
    current: 0,
    target: 1,
    unit: "trip",
    category: "family",
    deadline: "2026",
    status: "planning",
  },
];

const kpis = [
  { label: "Apps Built", value: "6", change: "+6 since Dec 2024", icon: Briefcase },
  { label: "Apps Live", value: "2", change: "2 pending LLC", icon: TrendingUp },
  { label: "Contract Months Left", value: "13", change: "Renews Mar 2026", icon: DollarSign },
  { label: "Morning Streak", value: "7", change: "days consistent", icon: Target },
];

const categoryColors: Record<string, string> = {
  financial: "bg-green-500/10 text-green-500",
  business: "bg-blue-500/10 text-blue-500",
  adventure: "bg-purple-500/10 text-purple-500",
  family: "bg-pink-500/10 text-pink-500",
};

const statusColors: Record<string, string> = {
  "in-progress": "bg-yellow-500/10 text-yellow-500",
  "not-started": "bg-gray-500/10 text-gray-500",
  planning: "bg-blue-500/10 text-blue-500",
  completed: "bg-green-500/10 text-green-500",
};

export default function MissionPage() {
  return (
    <DashboardLayout>
      <div className="space-y-8">
        {/* Header */}
        <div>
          <h1 className="text-3xl font-bold tracking-tight">The Mission</h1>
          <p className="text-muted-foreground mt-1">
            Your goals, values, and the path to freedom.
          </p>
        </div>

        {/* Mission Statement */}
        <Card className="bg-gradient-to-br from-blue-500/5 via-purple-500/5 to-pink-500/5 border-blue-500/20">
          <CardContent className="p-6">
            <h2 className="text-xl font-bold mb-3">{missionStatement.title}</h2>
            <p className="text-lg leading-relaxed text-muted-foreground">
              {missionStatement.description}
            </p>
          </CardContent>
        </Card>

        {/* KPIs */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
          {kpis.map((kpi) => {
            const Icon = kpi.icon;
            return (
              <Card key={kpi.label}>
                <CardHeader className="flex flex-row items-center justify-between pb-2">
                  <CardTitle className="text-sm font-medium text-muted-foreground">
                    {kpi.label}
                  </CardTitle>
                  <Icon className="w-4 h-4 text-muted-foreground" />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">{kpi.value}</div>
                  <p className="text-xs text-muted-foreground mt-1">{kpi.change}</p>
                </CardContent>
              </Card>
            );
          })}
        </div>

        {/* Core Values */}
        <div>
          <h2 className="text-xl font-bold mb-4">Core Values</h2>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
            {coreValues.map((value) => {
              const Icon = value.icon;
              return (
                <Card key={value.name}>
                  <CardContent className="p-4 text-center">
                    <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-3">
                      <Icon className="w-6 h-6 text-primary" />
                    </div>
                    <h3 className="font-semibold">{value.name}</h3>
                    <p className="text-sm text-muted-foreground mt-1">
                      {value.description}
                    </p>
                  </CardContent>
                </Card>
              );
            })}
          </div>
        </div>

        {/* Goals */}
        <div>
          <h2 className="text-xl font-bold mb-4">Goals</h2>
          <div className="space-y-4">
            {goals.map((goal) => (
              <Card key={goal.id}>
                <CardContent className="p-4">
                  <div className="flex flex-col sm:flex-row sm:items-center gap-4">
                    <div className="flex-1">
                      <div className="flex items-center gap-2 flex-wrap">
                        <h3 className="font-semibold">{goal.title}</h3>
                        <Badge className={categoryColors[goal.category]}>
                          {goal.category}
                        </Badge>
                        <Badge className={statusColors[goal.status]}>
                          {goal.status}
                        </Badge>
                      </div>
                      <p className="text-sm text-muted-foreground mt-1">
                        Deadline: {goal.deadline}
                      </p>
                    </div>
                    <div className="sm:w-48">
                      <div className="flex justify-between text-sm mb-1">
                        <span className="text-muted-foreground">Progress</span>
                        <span className="font-medium">
                          {goal.current}/{goal.target} {goal.unit}
                        </span>
                      </div>
                      <div className="h-2 bg-secondary rounded-full overflow-hidden">
                        <div
                          className="h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all"
                          style={{ width: `${(goal.current / goal.target) * 100}%` }}
                        />
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>

        {/* Quote */}
        <Card className="bg-gradient-to-r from-slate-800 to-slate-900 border-0">
          <CardContent className="p-6 text-center">
            <p className="text-lg italic text-slate-300">
              "53 is just the start of the best chapter."
            </p>
            <p className="text-sm text-slate-500 mt-2">— The Mission</p>
          </CardContent>
        </Card>
      </div>
    </DashboardLayout>
  );
}