import { BarChart3, FileText, Lightbulb, PenTool, TrendingUp, Zap } from 'lucide-react';

import { Checkbox } from '@/Components/ui/checkbox';
import { Label } from '@/Components/ui/label';

const SECTIONS = [
  {
    value: 'traffic_overview',
    label: 'Traffic Overview',
    description: 'Summary of traffic metrics, trends, and key performance indicators',
    icon: BarChart3,
  },
  {
    value: 'top_pages',
    label: 'Top Pages',
    description: 'Highest performing pages by clicks, impressions, and CTR',
    icon: TrendingUp,
  },
  {
    value: 'findings',
    label: 'Findings',
    description: 'Detected traffic changes, winners, and losers',
    icon: Zap,
  },
  {
    value: 'recommendations',
    label: 'Recommendations',
    description: 'Actionable SEO recommendations based on analysis',
    icon: Lightbulb,
  },
  {
    value: 'ai_drafts',
    label: 'AI Drafts',
    description: 'AI-generated content drafts and rewrites',
    icon: PenTool,
  },
  {
    value: 'roi_metrics',
    label: 'ROI Metrics',
    description: 'Return on investment tracking for applied recommendations',
    icon: FileText,
  },
];

interface Props {
  selectedSections: string[];
  onChange: (sections: string[]) => void;
  error?: string;
}

export default function ReportSectionSelector({ selectedSections, onChange, error }: Props) {
  const handleToggle = (sectionValue: string, checked: boolean) => {
    if (checked) {
      onChange([...selectedSections, sectionValue]);
    } else {
      onChange(selectedSections.filter((s) => s !== sectionValue));
    }
  };

  return (
    <div className="space-y-3">
      <div className="grid gap-3 md:grid-cols-2">
        {SECTIONS.map((section) => {
          const Icon = section.icon;
          const isChecked = selectedSections.includes(section.value);

          return (
            <div
              key={section.value}
              className={`flex items-start gap-3 rounded-lg border p-4 transition-all ${
                isChecked ? 'border-primary bg-primary/5' : 'border-border hover:border-primary/50'
              }`}
            >
              <Checkbox
                id={`section-${section.value}`}
                checked={isChecked}
                onCheckedChange={(checked) => handleToggle(section.value, checked === true)}
              />
              <div className="flex-1 space-y-1">
                <Label
                  htmlFor={`section-${section.value}`}
                  className="flex cursor-pointer items-center gap-2 font-medium"
                >
                  <Icon className="h-4 w-4" />
                  {section.label}
                </Label>
                <p className="text-xs text-muted-foreground">{section.description}</p>
              </div>
            </div>
          );
        })}
      </div>
      {error && <p className="text-sm text-destructive">{error}</p>}
    </div>
  );
}