import { DashboardLayout } from "@/components/layout/sidebar";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Calendar as CalendarIcon, Clock, MapPin } from "lucide-react";

const events = [
  {
    id: 1,
    title: "Yearly Anniversary",
    date: "February 23, 2026",
    time: "All day",
    type: "personal",
    description: "Anniversary celebration",
  },
  {
    id: 2,
    title: "Grabbing Anderson's dogs",
    date: "February 26, 2026",
    time: "5:30 PM - 6:30 PM",
    type: "task",
    description: "Pet sitting duties",
  },
  {
    id: 3,
    title: "Daily Standup",
    date: "Every weekday",
    time: "8:30 AM",
    type: "work",
    description: "Toyota iOS team standup",
  },
  {
    id: 4,
    title: "Group Workout",
    date: "Every weekday",
    time: "10:00 AM - 11:00 AM",
    type: "health",
    description: "Gym session",
  },
  {
    id: 5,
    title: "NWW - Cowboy Club",
    date: "Every Wednesday",
    time: "Evening",
    type: "social",
    description: "No Wives Wednesday with cigars",
  },
  {
    id: 6,
    title: "Contract Renewal",
    date: "March 2026",
    time: "TBD",
    type: "work",
    description: "Toyota contract up for renewal",
  },
  {
    id: 7,
    title: "Mindy Turns 60",
    date: "2026",
    time: "TBD",
    type: "family",
    description: "Family milestone birthday",
  },
  {
    id: 8,
    title: "Bailey Turns 35",
    date: "2026",
    time: "TBD",
    type: "family",
    description: "Family milestone birthday",
  },
  {
    id: 9,
    title: "Taylor Turns 30",
    date: "2026",
    time: "TBD",
    type: "family",
    description: "Family milestone birthday",
  },
];

const typeColors: Record<string, string> = {
  personal: "bg-pink-500/10 text-pink-500 border-pink-500/20",
  work: "bg-blue-500/10 text-blue-500 border-blue-500/20",
  health: "bg-green-500/10 text-green-500 border-green-500/20",
  social: "bg-purple-500/10 text-purple-500 border-purple-500/20",
  family: "bg-yellow-500/10 text-yellow-500 border-yellow-500/20",
  task: "bg-orange-500/10 text-orange-500 border-orange-500/20",
};

export default function CalendarPage() {
  const today = new Date().toLocaleDateString("en-US", {
    weekday: "long",
    year: "numeric",
    month: "long",
    day: "numeric",
  });

  return (
    <DashboardLayout>
      <div className="space-y-6">
        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
          <div>
            <h1 className="text-3xl font-bold tracking-tight">Calendar</h1>
            <p className="text-muted-foreground mt-1">{today}</p>
          </div>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Upcoming Events */}
          <div className="lg:col-span-2 space-y-4">
            <h2 className="text-lg font-semibold">Upcoming Events</h2>
            {events.map((event) => (
              <Card key={event.id}>
                <CardContent className="p-4">
                  <div className="flex items-start gap-4">
                    <div className="w-14 h-14 rounded-lg bg-secondary flex flex-col items-center justify-center shrink-0">
                      <span className="text-xs text-muted-foreground uppercase">
                        {event.date.split(" ")[0].slice(0, 3)}
                      </span>
                      <span className="text-lg font-bold">
                        {event.date.match(/\d+/)?.[0] || "--"}
                      </span>
                    </div>
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2 flex-wrap">
                        <h3 className="font-semibold">{event.title}</h3>
                        <Badge
                          variant="outline"
                          className={typeColors[event.type]}
                        >
                          {event.type}
                        </Badge>
                      </div>
                      <p className="text-sm text-muted-foreground mt-1">
                        {event.description}
                      </p>
                      <div className="flex items-center gap-4 mt-2 text-xs text-muted-foreground">
                        <span className="flex items-center gap-1">
                          <Clock className="w-3 h-3" />
                          {event.time}
                        </span>
                        <span className="flex items-center gap-1">
                          <CalendarIcon className="w-3 h-3" />
                          {event.date}
                        </span>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>

          {/* Sidebar */}
          <div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle className="text-base">Today's Summary</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex justify-between text-sm">
                  <span className="text-muted-foreground">Events</span>
                  <span className="font-medium">3</span>
                </div>
                <div className="flex justify-between text-sm">
                  <span className="text-muted-foreground">Tasks</span>
                  <span className="font-medium">4</span>
                </div>
                <div className="flex justify-between text-sm">
                  <span className="text-muted-foreground">Reminders</span>
                  <span className="font-medium">2</span>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle className="text-base">Quick Actions</CardTitle>
              </CardHeader>
              <CardContent className="space-y-2">
                <button className="w-full text-left px-3 py-2 rounded-lg text-sm hover:bg-accent transition-colors">
                  + Add Event
                </button>
                <button className="w-full text-left px-3 py-2 rounded-lg text-sm hover:bg-accent transition-colors">
                  + Add Reminder
                </button>
                <button className="w-full text-left px-3 py-2 rounded-lg text-sm hover:bg-accent transition-colors">
                  View Full Calendar
                </button>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </DashboardLayout>
  );
}