import { DashboardLayout } from "@/components/layout/sidebar";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Activity, Calendar, CheckCircle2, Target, TrendingUp, Clock } from "lucide-react";

const kpiData = [
  {
    title: "Active Tasks",
    value: "12",
    change: "+3 today",
    icon: CheckCircle2,
    trend: "up",
  },
  {
    title: "Goals Progress",
    value: "64%",
    change: "+8% this week",
    icon: Target,
    trend: "up",
  },
  {
    title: "Apps Built",
    value: "6",
    change: "2 in App Store",
    icon: TrendingUp,
    trend: "up",
  },
  {
    title: "Year Progress",
    value: "14%",
    change: "Day 51 of 365",
    icon: Clock,
    trend: "neutral",
  },
];

const recentActivity = [
  { action: "Organized Downloads", time: "2 hours ago", type: "file" },
  { action: "Completed morning briefing", time: "5 hours ago", type: "system" },
  { action: "Created 5 new skills", time: "1 day ago", type: "tool" },
  { action: "Updated USER.md", time: "2 days ago", type: "doc" },
];

const upcomingEvents = [
  { title: "Yearly Anniversary", date: "Feb 23", type: "personal" },
  { title: "Grabbing Anderson's dogs", date: "Feb 26, 5:30 PM", type: "task" },
  { title: "Contract Renewal Check", date: "Mar 2026", type: "work" },
];

const MISSION_STATEMENT = "Build an iOS empire that generates the cashflow to retire on our own terms, travel the world with Heidi, honor every family milestone in style, and prove that 53 is just the launchpad to life's greatest chapter.";

export default function DashboardPage() {
  return (
    <DashboardLayout>
      <div className="space-y-8">
        {/* Mission Statement Banner */}
        <Card className="bg-gradient-to-r from-blue-600/20 via-purple-600/20 to-pink-600/20 border-blue-500/30">
          <CardContent className="p-6">
            <div className="flex items-start gap-4">
              <div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center shrink-0">
                <Target className="w-5 h-5 text-white" />
              </div>
              <div>
                <h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide mb-2">
                  The Mission
                </h2>
                <p className="text-lg font-medium leading-relaxed">
                  {MISSION_STATEMENT}
                </p>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Header */}
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
          <p className="text-muted-foreground mt-1">
            Welcome back, Matt. Here's your mission overview.
          </p>
        </div>

        {/* KPI Cards */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
          {kpiData.map((kpi) => {
            const Icon = kpi.icon;
            return (
              <Card key={kpi.title}>
                <CardHeader className="flex flex-row items-center justify-between pb-2">
                  <CardTitle className="text-sm font-medium text-muted-foreground">
                    {kpi.title}
                  </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>

        {/* Two Column Layout */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {/* Recent Activity */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Activity className="w-5 h-5" />
                Recent Activity
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {recentActivity.map((item, i) => (
                  <div key={i} className="flex items-start gap-3 pb-3 border-b border-border last:border-0 last:pb-0">
                    <div className="w-2 h-2 rounded-full bg-primary mt-2" />
                    <div className="flex-1">
                      <p className="text-sm font-medium">{item.action}</p>
                      <p className="text-xs text-muted-foreground">{item.time}</p>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

          {/* Upcoming Events */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Calendar className="w-5 h-5" />
                Upcoming Events
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {upcomingEvents.map((event, i) => (
                  <div key={i} className="flex items-start gap-3 pb-3 border-b border-border last:border-0 last:pb-0">
                    <div className="w-2 h-2 rounded-full bg-blue-500 mt-2" />
                    <div className="flex-1">
                      <p className="text-sm font-medium">{event.title}</p>
                      <p className="text-xs text-muted-foreground">{event.date}</p>
                    </div>
                    <span className="text-xs px-2 py-1 rounded-full bg-secondary text-secondary-foreground">
                      {event.type}
                    </span>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>

        {/* Mission Progress */}
        <Card>
          <CardHeader>
            <CardTitle>Mission Progress</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div>
                <div className="flex justify-between text-sm mb-2">
                  <span>Retirement Goal</span>
                  <span className="text-muted-foreground">50% complete</span>
                </div>
                <div className="h-2 bg-secondary rounded-full overflow-hidden">
                  <div className="h-full w-1/2 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full" />
                </div>
              </div>
              <div>
                <div className="flex justify-between text-sm mb-2">
                  <span>iOS Apps Portfolio</span>
                  <span className="text-muted-foreground">6 apps built</span>
                </div>
                <div className="h-2 bg-secondary rounded-full overflow-hidden">
                  <div className="h-full w-3/4 bg-gradient-to-r from-green-500 to-emerald-500 rounded-full" />
                </div>
              </div>
              <div>
                <div className="flex justify-between text-sm mb-2">
                  <span>Side Hustle Revenue</span>
                  <span className="text-muted-foreground">Just getting started</span>
                </div>
                <div className="h-2 bg-secondary rounded-full overflow-hidden">
                  <div className="h-full w-[5%] bg-gradient-to-r from-orange-500 to-red-500 rounded-full" />
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </DashboardLayout>
  );
}