import { Check, FileText } from 'lucide-react';

import { Badge } from '@/Components/ui/badge';
import { Button } from '@/Components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card';

interface ReportTemplate {
  id: number;
  name: string;
  description: string;
  sections: Record<string, boolean>;
  filters: {
    date_start?: string;
    date_end?: string;
    comparison_start?: string;
    comparison_end?: string;
    device?: string;
    country?: string;
  };
  is_system: boolean;
}

interface Props {
  template: ReportTemplate;
  isSelected: boolean;
  onSelect: () => void;
}

const SECTION_LABELS: Record<string, string> = {
  traffic_overview: 'Traffic Overview',
  top_pages: 'Top Pages',
  findings: 'Findings',
  recommendations: 'Recommendations',
  ai_drafts: 'AI Drafts',
  roi_metrics: 'ROI Metrics',
};

export default function TemplateCard({ template, isSelected, onSelect }: Props) {
  const sectionList = Object.keys(template.sections).filter((key) => template.sections[key]);

  return (
    <Card
      className={`cursor-pointer transition-all ${
        isSelected
          ? 'border-primary shadow-md ring-2 ring-primary/20'
          : 'hover:border-primary/50 hover:shadow-md'
      }`}
      onClick={onSelect}
    >
      <CardHeader>
        <div className="flex items-start justify-between">
          <FileText
            className={`h-5 w-5 ${isSelected ? 'text-primary' : 'text-muted-foreground'}`}
          />
          {isSelected && (
            <div className="flex h-6 w-6 items-center justify-center rounded-full bg-primary text-primary-foreground">
              <Check className="h-4 w-4" />
            </div>
          )}
        </div>
        <CardTitle className="text-lg">{template.name}</CardTitle>
        <CardDescription>{template.description}</CardDescription>
      </CardHeader>
      <CardContent className="space-y-3">
        <div>
          <p className="mb-2 text-xs font-medium text-muted-foreground">
            Includes {sectionList.length} sections:
          </p>
          <div className="flex flex-wrap gap-1">
            {sectionList.map((section) => (
              <Badge key={section} variant="secondary" className="text-xs">
                {SECTION_LABELS[section] ?? section}
              </Badge>
            ))}
          </div>
        </div>
        <Button
          variant={isSelected ? 'default' : 'outline'}
          size="sm"
          className="w-full"
          onClick={(e) => {
            e.stopPropagation();
            onSelect();
          }}
        >
          {isSelected ? 'Selected' : 'Use This Template'}
        </Button>
      </CardContent>
    </Card>
  );
}