import { CheckCircle2, ExternalLink, ShieldCheck } from 'lucide-react';

import { useEffect, useRef, useState } from 'react';

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

import ConnectionStatusBadge from '@/Components/Connections/ConnectionStatusBadge';
import SyncProgressTimeline from '@/Components/Connections/SyncProgressTimeline';
import { Button } from '@/Components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/Components/ui/card';
import { ConfirmDialog } from '@/Components/ui/confirm-dialog';
import { useMilestone } from '@/hooks/useMilestone';
import { usePolling } from '@/hooks/usePolling';
import { trackEvent } from '@/lib/analytics';
import { GSC_CONNECT_INITIATED, MILESTONE_CELEBRATED } from '@/lib/event-catalog';

interface GscConnection {
  property_url: string;
  last_synced_at: string | null;
  status: string;
}

interface GscConnectCardProps {
  siteId: number;
  connection: GscConnection | null;
}

export default function GscConnectCard({ siteId, connection }: GscConnectCardProps) {
  const [showDisconnect, setShowDisconnect] = useState(false);
  const [syncStartedAt] = useState(() => Date.now());
  const { celebrate, hasCelebrated } = useMilestone('gsc_connected');
  const celebratedRef = useRef(false);

  const isSyncing = connection !== null && connection.status !== 'synced';
  const isSynced = connection?.status === 'synced';

  // Auto-poll every 5s while GSC is syncing
  usePolling(isSyncing, 5000, ['gscConnection']);

  // Fire celebration toast when sync completes
  useEffect(() => {
    if (isSynced && !hasCelebrated && !celebratedRef.current) {
      celebratedRef.current = true;
      celebrate('Your search data is ready!', 'You can now run your first analysis.');
      trackEvent(MILESTONE_CELEBRATED, { milestone: 'gsc_connected' });
    }
  }, [isSynced, hasCelebrated, celebrate]);

  if (!connection) {
    return (
      <Card>
        <CardHeader>
          <CardTitle className="text-lg">Google Search Console</CardTitle>
        </CardHeader>
        <CardContent>
          <ul className="text-sm text-muted-foreground space-y-1 mb-4">
            <li>Import search clicks, impressions, and rankings by page and query</li>
            <li>Detect traffic winners and losers automatically</li>
            <li>Track keyword cannibalization across your site</li>
          </ul>
          <p className="text-xs text-muted-foreground mb-4 flex items-center gap-1">
            <ShieldCheck className="h-3 w-3" />
            Read-only access — we never modify your Search Console data. Initial sync typically
            takes 2-5 minutes.
          </p>
          <Button asChild onClick={() => trackEvent(GSC_CONNECT_INITIATED, { site_id: siteId })}>
            <a href={route('gsc.connect', siteId)}>
              <ExternalLink className="mr-2 h-4 w-4" />
              Connect GSC
            </a>
          </Button>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between">
          <CardTitle className="text-lg">Google Search Console</CardTitle>
          <ConnectionStatusBadge status={isSynced ? 'connected' : connection.status} />
        </div>
      </CardHeader>
      <CardContent>
        <dl className="space-y-2 text-sm">
          <div>
            <dt className="text-muted-foreground">Property</dt>
            <dd className="font-medium">{connection.property_url}</dd>
          </div>
          <div>
            <dt className="text-muted-foreground">Last synced</dt>
            <dd>{connection.last_synced_at ?? 'Never'}</dd>
          </div>
          <div>
            <dt className="text-muted-foreground">Sync status</dt>
            <dd>
              <ConnectionStatusBadge status={connection.status} />
            </dd>
          </div>
        </dl>

        {/* Sync wait experience — 3-stage timeline */}
        {isSyncing && (
          <div className="mt-4">
            <SyncProgressTimeline startedAt={syncStartedAt} />
          </div>
        )}

        {/* UX-013: Token expiry warning with actionable re-auth link */}
        {connection.status === 'failed' && (
          <div className="mt-4 rounded-lg border border-destructive/20 bg-destructive/5 p-3 text-sm">
            <p className="font-medium text-destructive mb-1">Google authentication expired</p>
            <p className="text-muted-foreground mb-2">
              Your GSC access token has expired. Re-authenticate to resume data syncing.
            </p>
            <Button asChild size="sm" variant="outline">
              <a href={route('gsc.connect', siteId)}>
                <ExternalLink className="mr-2 h-3.5 w-3.5" />
                Re-authenticate with Google
              </a>
            </Button>
          </div>
        )}

        {/* Sync complete celebration */}
        {isSynced && (
          <div className="mt-4 flex items-center gap-2 rounded-lg border border-success/20 bg-success/5 p-3">
            <CheckCircle2 className="h-4 w-4 text-success shrink-0" />
            <div className="text-sm">
              <span className="font-medium text-success">Data ready!</span>
              <span className="text-muted-foreground ml-1">
                Your search data has been imported.
              </span>
            </div>
          </div>
        )}

        <Button
          variant="destructive"
          size="sm"
          className="mt-4"
          onClick={() => setShowDisconnect(true)}
        >
          Disconnect
        </Button>
        <ConfirmDialog
          open={showDisconnect}
          onOpenChange={setShowDisconnect}
          title="Disconnect Google Search Console?"
          description="This will stop GSC data syncing and remove your search traffic data. Existing analysis runs are not affected, but new analyses won't have fresh data until you reconnect. You can reconnect at any time."
          confirmLabel="Disconnect"
          variant="destructive"
          onConfirm={() => router.delete(route('gsc.disconnect', siteId))}
        />
      </CardContent>
    </Card>
  );
}