import { DashboardLayout } from "@/components/layout/sidebar";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Badge } from "@/components/ui/badge";
import {
  Activity,
  FileText,
  Wrench,
  MessageSquare,
  Calendar,
  CheckCircle2,
} from "lucide-react";

const activities = [
  {
    id: 1,
    type: "system",
    action: "Morning briefing completed",
    details: "Checked calendar, email, reminders, and disk usage",
    time: "Today at 7:15 AM",
    icon: CheckCircle2,
  },
  {
    id: 2,
    type: "file",
    action: "Downloads organized",
    details: "Sorted 81 files into Images (18), Documents (31), Archives (32)",
    time: "Today at 9:30 AM",
    icon: FileText,
  },
  {
    id: 3,
    type: "tool",
    action: "Created 6 new skills",
    details: "File System, Browser Automation, Calendar, Email, Knowledge Base, Daily Automation",
    time: "Yesterday at 5:00 PM",
    icon: Wrench,
  },
  {
    id: 4,
    type: "doc",
    action: "Updated USER.md",
    details: "Added family details, daily routine, and project status",
    time: "Yesterday at 4:30 PM",
    icon: FileText,
  },
  {
    id: 5,
    type: "communication",
    action: "Brain dump completed",
    details: "Captured interests, career, goals, family, and preferences",
    time: "Yesterday at 3:00 PM",
    icon: MessageSquare,
  },
  {
    id: 6,
    type: "system",
    action: "Daily automation scheduled",
    details: "Morning briefing cron job set for 7:15 AM daily",
    time: "Yesterday at 2:45 PM",
    icon: Calendar,
  },
  {
    id: 7,
    type: "file",
    action: "Created DAILY_TOOLS_SETUP.md",
    details: "Documented all skill integrations and setup instructions",
    time: "Yesterday at 2:00 PM",
    icon: FileText,
  },
  {
    id: 8,
    type: "tool",
    action: "Installed icalBuddy",
    details: "Calendar integration now working with Apple Calendar",
    time: "Yesterday at 1:30 PM",
    icon: Wrench,
  },
];

const typeColors: Record<string, string> = {
  system: "bg-blue-500/10 text-blue-500",
  file: "bg-green-500/10 text-green-500",
  tool: "bg-purple-500/10 text-purple-500",
  doc: "bg-yellow-500/10 text-yellow-500",
  communication: "bg-pink-500/10 text-pink-500",
};

export default function ActivityPage() {
  return (
    <DashboardLayout>
      <div className="space-y-6">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Activity Feed</h1>
          <p className="text-muted-foreground mt-1">
            Everything that's happening in your mission control.
          </p>
        </div>

        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Activity className="w-5 h-5" />
              Recent Activity
            </CardTitle>
          </CardHeader>
          <CardContent>
            <ScrollArea className="h-[600px] pr-4">
              <div className="space-y-6">
                {activities.map((activity) => {
                  const Icon = activity.icon;
                  return (
                    <div
                      key={activity.id}
                      className="flex gap-4 pb-6 border-b border-border last:border-0"
                    >
                      <div
                        className={`w-10 h-10 rounded-full flex items-center justify-center shrink-0 ${
                          typeColors[activity.type]
                        }`}
                      >
                        <Icon className="w-5 h-5" />
                      </div>
                      <div className="flex-1 space-y-1">
                        <div className="flex items-center gap-2">
                          <h4 className="font-medium">{activity.action}</h4>
                          <Badge variant="secondary" className="text-xs">
                            {activity.type}
                          </Badge>
                        </div>
                        <p className="text-sm text-muted-foreground">
                          {activity.details}
                        </p>
                        <p className="text-xs text-muted-foreground">{activity.time}</p>
                      </div>
                    </div>
                  );
                })}
              </div>
            </ScrollArea>
          </CardContent>
        </Card>
      </div>
    </DashboardLayout>
  );
}