import { CheckCircle2, Circle } from 'lucide-react';

import { Link } from '@inertiajs/react';

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

interface IntegrationStatusCardProps {
  aiAvailable: boolean;
  hasSerpKey: boolean;
  hasWp: boolean;
  siteId: number;
}

interface IntegrationItem {
  label: string;
  done: boolean;
  href: string;
  cta: string;
  note?: string;
}

export default function IntegrationStatusCard({
  aiAvailable,
  hasSerpKey,
  hasWp,
  siteId,
}: IntegrationStatusCardProps) {
  const allDone = aiAvailable && hasSerpKey && hasWp;
  if (allDone) return null;

  const integrations: IntegrationItem[] = [
    {
      label: 'AI Drafts',
      done: aiAvailable,
      href: route('settings.ai'),
      cta: 'Set up now →',
    },
    {
      label: 'DataForSEO Key',
      done: hasSerpKey,
      href: route('settings.serp'),
      cta: 'Set up now →',
      note: 'Optional — enables SERP scoring',
    },
    {
      label: 'WordPress Plugin',
      done: hasWp,
      href: route('onboarding.index', siteId),
      cta: 'Set up now →',
    },
  ];

  return (
    <Card className="border-muted">
      <CardHeader className="pb-2">
        <CardTitle className="text-sm font-semibold">Setup Status</CardTitle>
      </CardHeader>
      <CardContent>
        <ul className="space-y-2">
          {integrations.map((item) => (
            <li key={item.label} className="flex items-center justify-between gap-2 text-sm">
              <div className="flex items-center gap-2 min-w-0">
                {item.done ? (
                  <CheckCircle2 className="h-4 w-4 text-green-500 dark:text-green-400 shrink-0" />
                ) : (
                  <Circle className="h-4 w-4 text-muted-foreground/40 shrink-0" />
                )}
                <span className={item.done ? 'text-muted-foreground line-through' : 'text-foreground'}>
                  {item.label}
                </span>
                {item.note && !item.done && (
                  <span className="text-xs text-muted-foreground hidden sm:inline">({item.note})</span>
                )}
              </div>
              {!item.done && (
                <Button asChild variant="link" size="sm" className="h-auto p-0 text-xs shrink-0">
                  <Link href={item.href}>{item.cta}</Link>
                </Button>
              )}
            </li>
          ))}
        </ul>
      </CardContent>
    </Card>
  );
}