'use client';

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

const prototypes = [
  {
    id: 'main-dashboard',
    title: 'Main Dashboard',
    description: 'Landing page with projects list, activity feed, and quick stats overview',
    icon: Home,
    issue: '#47',
    status: 'ready',
    features: [
      'Projects grid/list view with status badges',
      'Real-time activity feed',
      'Quick stats overview',
      'Filter and sort controls',
      'Empty state for new users',
      'Responsive layout',
    ],
  },
  {
    id: 'project-dashboard',
    title: 'Project Dashboard',
    description: 'Comprehensive view of project status, agents, sprints, and activity',
    icon: LayoutDashboard,
    issue: '#36',
    status: 'ready',
    features: [
      'Project header with status badges',
      'Agent panel with status indicators',
      'Sprint progress and burndown chart',
      'Issue summary sidebar',
      'Recent activity feed',
    ],
  },
  {
    id: 'agent-configuration',
    title: 'Agent Configuration',
    description: 'Create and manage agent type templates with model and permission settings',
    icon: Bot,
    issue: '#37',
    status: 'ready',
    features: [
      'Agent type list view',
      'Agent type detail view',
      'Tabbed editor interface',
      'Model and parameter configuration',
      'MCP permission management',
      'Personality prompt editor',
    ],
  },
  {
    id: 'issue-management',
    title: 'Issue Management',
    description: 'List and detail views for project issues with filtering and workflow actions',
    icon: CircleDot,
    issue: '#38',
    status: 'ready',
    features: [
      'Filterable issue table',
      'Sortable columns',
      'Bulk action support',
      'Sync status indicators',
      'Status workflow buttons',
      'Activity timeline',
    ],
  },
  {
    id: 'activity-feed',
    title: 'Activity Feed',
    description: 'Real-time event feed with filtering, grouping, and action handling',
    icon: Activity,
    issue: '#39',
    status: 'ready',
    features: [
      'Real-time connection indicator',
      'Time-based event grouping',
      'Event type filtering',
      'Expandable event details',
      'Approval request handling',
      'Search functionality',
    ],
  },
];

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">
              Interactive design prototypes for Phase 1 features. Click a prototype to view and interact with it.
            </p>
            <p className="mt-1 text-sm text-muted-foreground">
              These prototypes are navigable demos - not production code. They demonstrate UI/UX concepts for approval before implementation.
            </p>
          </div>

          {/* Prototype Cards */}
          <div className="grid gap-6 md:grid-cols-2">
            {prototypes.map((proto) => {
              const Icon = proto.icon;
              return (
                <Link key={proto.id} href={`/prototypes/${proto.id}`}>
                  <Card className="h-full cursor-pointer transition-all hover:border-primary hover:shadow-lg">
                    <CardHeader>
                      <div className="flex items-start justify-between">
                        <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                          <Icon className="h-6 w-6 text-primary" />
                        </div>
                        <div className="flex gap-2">
                          <Badge variant="outline">{proto.issue}</Badge>
                          <Badge
                            variant={proto.status === 'ready' ? 'default' : 'secondary'}
                          >
                            {proto.status === 'ready' ? 'Ready for Review' : proto.status}
                          </Badge>
                        </div>
                      </div>
                      <CardTitle className="mt-4">{proto.title}</CardTitle>
                      <CardDescription>{proto.description}</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-2">
                        <p className="text-sm font-medium">Key Features:</p>
                        <ul className="space-y-1">
                          {proto.features.slice(0, 4).map((feature) => (
                            <li
                              key={feature}
                              className="flex items-center gap-2 text-sm text-muted-foreground"
                            >
                              <ChevronRight className="h-3 w-3" />
                              {feature}
                            </li>
                          ))}
                          {proto.features.length > 4 && (
                            <li className="text-sm text-muted-foreground">
                              +{proto.features.length - 4} more...
                            </li>
                          )}
                        </ul>
                      </div>
                    </CardContent>
                  </Card>
                </Link>
              );
            })}
          </div>

          {/* Instructions */}
          <Card className="bg-muted/50">
            <CardHeader>
              <CardTitle className="text-lg">Reviewing Prototypes</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <h4 className="font-medium">What to Look For:</h4>
                <ul className="mt-2 space-y-1 text-sm text-muted-foreground">
                  <li>- Layout and visual hierarchy</li>
                  <li>- Information density and readability</li>
                  <li>- User flow and navigation patterns</li>
                  <li>- Interactive elements and feedback</li>
                  <li>- Responsive behavior (resize browser)</li>
                </ul>
              </div>
              <div>
                <h4 className="font-medium">Providing Feedback:</h4>
                <ul className="mt-2 space-y-1 text-sm text-muted-foreground">
                  <li>- Comment on the related Gitea issue</li>
                  <li>- Specify what works and what needs changes</li>
                  <li>- Suggest alternatives where applicable</li>
                  <li>- Approve when ready for implementation</li>
                </ul>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
}
