import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { ListChecks, Clock, DollarSign, GitBranch, ExternalLink, User } from "lucide-react";
import { PageHeader } from "@/components/layout/page-header";

// Mock data
const PROGRESS_ITEMS = [
  {
    id: 1,
    title: "Implemented Product Vision page with file upload",
    description: "Created dynamic layout system with file upload capabilities for ChatGPT exports",
    contributor: "Mark Henderson",
    date: "2025-11-11",
    time: "2h 15m",
    tokens: 45000,
    cost: 0.68,
    github_link: "https://github.com/user/repo/commit/abc123",
    type: "feature"
  },
  {
    id: 2,
    title: "Updated left rail navigation structure",
    description: "Refactored navigation to remove rounded edges and improve active state",
    contributor: "Mark Henderson",
    date: "2025-11-11",
    time: "45m",
    tokens: 12000,
    cost: 0.18,
    github_link: "https://github.com/user/repo/commit/def456",
    type: "improvement"
  },
  {
    id: 3,
    title: "Added section summaries to Overview page",
    description: "Created cards for Product Vision, Progress, UI UX, Code, Deployment, and Automation",
    contributor: "Mark Henderson",
    date: "2025-11-11",
    time: "1h 30m",
    tokens: 32000,
    cost: 0.48,
    github_link: "https://github.com/user/repo/commit/ghi789",
    type: "feature"
  },
  {
    id: 4,
    title: "Fixed database connection issues",
    description: "Resolved connection pooling and error handling in API routes",
    contributor: "Mark Henderson",
    date: "2025-11-10",
    time: "30m",
    tokens: 8000,
    cost: 0.12,
    github_link: "https://github.com/user/repo/commit/jkl012",
    type: "fix"
  },
];

export default async function ProgressPage({
  params,
}: {
  params: Promise<{ projectId: string }>;
}) {
  const { projectId } = await params;
  return (
    <>
      <PageHeader
        projectId={projectId}
        projectName="AI Proxy"
        projectEmoji="🤖"
        pageName="Progress"
      />
      <div className="flex h-full flex-col overflow-auto">
        {/* Hero Section */}
        <div className="border-b bg-gradient-to-r from-green-500/5 to-green-500/10 p-8">
          <div className="mx-auto max-w-6xl">
            <div className="flex items-center gap-3 mb-4">
              <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-500/10">
                <ListChecks className="h-6 w-6 text-green-600" />
              </div>
              <div>
                <h1 className="text-3xl font-bold">Progress</h1>
                <p className="text-muted-foreground">Development activity and velocity</p>
              </div>
            </div>
          </div>
        </div>

        {/* Main Content */}
        <div className="flex-1 p-6">
          <div className="mx-auto max-w-6xl space-y-6">
            {/* Summary Stats */}
            <div className="grid gap-4 md:grid-cols-4">
              <Card>
                <CardContent className="pt-4 pb-3">
                  <div className="text-xs text-muted-foreground mb-1">Total Items</div>
                  <div className="text-2xl font-bold">{PROGRESS_ITEMS.length}</div>
                </CardContent>
              </Card>
              <Card>
                <CardContent className="pt-4 pb-3">
                  <div className="text-xs text-muted-foreground mb-1">Total Time</div>
                  <div className="text-2xl font-bold">5h 0m</div>
                </CardContent>
              </Card>
              <Card>
                <CardContent className="pt-4 pb-3">
                  <div className="text-xs text-muted-foreground mb-1">Total Cost</div>
                  <div className="text-2xl font-bold">$1.46</div>
                </CardContent>
              </Card>
              <Card>
                <CardContent className="pt-4 pb-3">
                  <div className="text-xs text-muted-foreground mb-1">Total Tokens</div>
                  <div className="text-2xl font-bold">97K</div>
                </CardContent>
              </Card>
            </div>

            {/* Progress List */}
            <Card>
              <CardHeader>
                <div className="flex items-center justify-between">
                  <div>
                    <CardTitle>Development Activity</CardTitle>
                    <CardDescription>Sorted by latest</CardDescription>
                  </div>
                  <div className="flex gap-2">
                    <Button variant="outline" size="sm">
                      Latest
                    </Button>
                    <Button variant="ghost" size="sm">
                      Cost
                    </Button>
                    <Button variant="ghost" size="sm">
                      Time
                    </Button>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {PROGRESS_ITEMS.map((item) => (
                    <div
                      key={item.id}
                      className="flex flex-col gap-3 rounded-lg border p-4 hover:bg-accent/50 transition-colors"
                    >
                      {/* Header Row */}
                      <div className="flex items-start justify-between">
                        <div className="flex-1">
                          <div className="flex items-center gap-2 mb-1">
                            <h3 className="font-semibold">{item.title}</h3>
                            <Badge variant={
                              item.type === 'feature' ? 'default' : 
                              item.type === 'fix' ? 'destructive' : 
                              'secondary'
                            } className="text-xs">
                              {item.type}
                            </Badge>
                          </div>
                          <p className="text-sm text-muted-foreground">{item.description}</p>
                        </div>
                      </div>

                      {/* Metadata Row */}
                      <div className="flex items-center gap-6 text-sm">
                        {/* Contributor */}
                        <div className="flex items-center gap-1.5">
                          <User className="h-4 w-4 text-muted-foreground" />
                          <span className="text-muted-foreground">{item.contributor}</span>
                        </div>

                        {/* Time */}
                        <div className="flex items-center gap-1.5">
                          <Clock className="h-4 w-4 text-muted-foreground" />
                          <span className="text-muted-foreground">{item.time}</span>
                        </div>

                        {/* Tokens */}
                        <div className="flex items-center gap-1.5">
                          <span className="text-muted-foreground">{item.tokens.toLocaleString()} tokens</span>
                        </div>

                        {/* Cost */}
                        <div className="flex items-center gap-1.5">
                          <DollarSign className="h-4 w-4 text-muted-foreground" />
                          <span className="text-muted-foreground">${item.cost.toFixed(2)}</span>
                        </div>

                        {/* GitHub Link */}
                        <div className="ml-auto">
                          <Button variant="ghost" size="sm" className="h-7" asChild>
                            <a href={item.github_link} target="_blank" rel="noopener noreferrer">
                              <GitBranch className="mr-1.5 h-3.5 w-3.5" />
                              Commit
                              <ExternalLink className="ml-1.5 h-3 w-3" />
                            </a>
                          </Button>
                        </div>
                      </div>

                      {/* Date */}
                      <div className="text-xs text-muted-foreground">
                        {new Date(item.date).toLocaleDateString('en-US', { 
                          month: 'long', 
                          day: 'numeric', 
                          year: 'numeric' 
                        })}
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </>
  );
}