'use client';

import Link from 'next/link';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
  LayoutDashboard,
  Bot,
  CircleDot,
  Activity,
  ChevronRight,
  Wand2,
  Home,
  CheckCircle2,
  ArrowRight,
} from 'lucide-react';

const implementedPrototypes = [
  {
    id: 'main-dashboard',
    title: 'Main Dashboard',
    description: 'Landing page with projects list, activity feed, and quick stats overview',
    icon: Home,
    issue: '#47',
    implementedAt: '/projects',
  },
  {
    id: 'project-dashboard',
    title: 'Project Dashboard',
    description: 'Comprehensive view of project status, agents, sprints, and activity',
    icon: LayoutDashboard,
    issue: '#36',
    implementedAt: '/projects/[id]',
  },
  {
    id: 'agent-configuration',
    title: 'Agent Configuration',
    description: 'Create and manage agent type templates with model and permission settings',
    icon: Bot,
    issue: '#37',
    implementedAt: '/agents',
  },
  {
    id: 'issue-management',
    title: 'Issue Management',
    description: 'List and detail views for project issues with filtering and workflow actions',
    icon: CircleDot,
    issue: '#38',
    implementedAt: '/projects/[id]/issues',
  },
  {
    id: 'activity-feed',
    title: 'Activity Feed',
    description: 'Real-time event feed with filtering, grouping, and action handling',
    icon: Activity,
    issue: '#39',
    implementedAt: '/activity',
  },
  {
    id: 'project-wizard',
    title: 'Project Creation Wizard',
    description: 'Guided onboarding flow for creating new projects with AI agent configuration',
    icon: Wand2,
    issue: '#49',
    implementedAt: '/projects/new',
  },
];

export default function PrototypesIndex() {
  return (
    <div className="min-h-screen bg-background">
      <div className="container mx-auto px-4 py-8">
        <div className="mx-auto max-w-4xl space-y-8">
          {/* Header */}
          <div>
            <h1 className="text-3xl font-bold">Syndarix UI Prototypes</h1>
            <p className="mt-2 text-muted-foreground">
              This page serves as a staging area for new UI prototypes before implementation.
            </p>
            <div className="mt-4 flex items-center gap-2">
              <CheckCircle2 className="h-5 w-5 text-green-500" />
              <span className="text-sm font-medium text-green-600">
                All Phase 1 prototypes have been implemented!
              </span>
            </div>
          </div>

          {/* Implemented Prototypes */}
          <Card>
            <CardHeader>
              <CardTitle>Implemented Features</CardTitle>
              <CardDescription>
                These prototypes have been approved and implemented in the main application.
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                {implementedPrototypes.map((proto) => {
                  const Icon = proto.icon;
                  return (
                    <div
                      key={proto.id}
                      className="flex items-center justify-between rounded-lg border p-3"
                    >
                      <div className="flex items-center gap-3">
                        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-green-100 dark:bg-green-900/20">
                          <Icon className="h-5 w-5 text-green-600 dark:text-green-400" />
                        </div>
                        <div>
                          <p className="font-medium">{proto.title}</p>
                          <p className="text-sm text-muted-foreground">{proto.description}</p>
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        <Badge variant="outline" className="text-green-600">
                          {proto.issue}
                        </Badge>
                        <Badge variant="secondary">Implemented</Badge>
                      </div>
                    </div>
                  );
                })}
              </div>
            </CardContent>
          </Card>

          {/* Instructions for New Prototypes */}
          <Card className="bg-muted/50">
            <CardHeader>
              <CardTitle className="text-lg">Creating New Prototypes</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <h4 className="font-medium">Workflow:</h4>
                <ul className="mt-2 space-y-1 text-sm text-muted-foreground">
                  <li className="flex items-start gap-2">
                    <ChevronRight className="mt-0.5 h-4 w-4 flex-shrink-0" />
                    <span>Create a Gitea issue with the &quot;design&quot; label</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <ChevronRight className="mt-0.5 h-4 w-4 flex-shrink-0" />
                    <span>Build interactive prototype in this directory</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <ChevronRight className="mt-0.5 h-4 w-4 flex-shrink-0" />
                    <span>Get user approval on the design</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <ChevronRight className="mt-0.5 h-4 w-4 flex-shrink-0" />
                    <span>Implement in the main app following design system</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <ChevronRight className="mt-0.5 h-4 w-4 flex-shrink-0" />
                    <span>Remove prototype after implementation</span>
                  </li>
                </ul>
              </div>
              <div>
                <h4 className="font-medium">Prototype Guidelines:</h4>
                <ul className="mt-2 space-y-1 text-sm text-muted-foreground">
                  <li>- Use mock data, no backend integration required</li>
                  <li>- Focus on UX flows and visual hierarchy</li>
                  <li>- Make it interactive and navigable</li>
                  <li>- Document decisions in issue comments</li>
                </ul>
              </div>
            </CardContent>
          </Card>

          {/* Quick Links */}
          <div className="flex flex-wrap gap-4">
            <Button asChild variant="outline">
              <Link href="/" className="gap-2">
                <Home className="h-4 w-4" />
                Home
              </Link>
            </Button>
            <Button asChild variant="outline">
              <Link href="/dev" className="gap-2">
                <LayoutDashboard className="h-4 w-4" />
                Design System
              </Link>
            </Button>
            <Button asChild>
              <Link href="/projects" className="gap-2">
                View Implemented Features
                <ArrowRight className="h-4 w-4" />
              </Link>
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}
