import { Check, Copy, ExternalLink } from 'lucide-react';

import { useState } from 'react';

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

import ConnectionStatusBadge from '@/Components/Connections/ConnectionStatusBadge';
import { SyncStatusIndicator } from '@/Components/Connections/SyncStatusIndicator';
import { Button } from '@/Components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/Components/ui/card';
import { ConfirmDialog } from '@/Components/ui/confirm-dialog';
import { Input } from '@/Components/ui/input';
import { LoadingButton } from '@/Components/ui/loading-button';
import { trackEvent } from '@/lib/analytics';
import { MILESTONE_CELEBRATED, WP_CONNECT_INITIATED } from '@/lib/event-catalog';

interface WpConnection {
  wp_url: string;
  setup_token?: string;
  status: string;
  plugin_version?: string;
  capabilities?: Record<string, boolean>;
  last_webhook_at?: string | null;
  last_sync_at?: string | null;
}

interface WpConnectCardProps {
  siteId: number;
  connection: WpConnection | null;
}

export default function WpConnectCard({ siteId, connection }: WpConnectCardProps) {
  const [copied, setCopied] = useState(false);
  const [showDisconnect, setShowDisconnect] = useState(false);
  const { data, setData, post, processing, errors } = useForm({ wp_url: '' });
  const [verifying, setVerifying] = useState(false);

  const handleConnect = (e: React.FormEvent) => {
    e.preventDefault();
    trackEvent(WP_CONNECT_INITIATED, { site_id: siteId });
    post(route('wp.connect', siteId), {
      onSuccess: () =>
        trackEvent(MILESTONE_CELEBRATED, { milestone: 'wp_connected', site_id: siteId }),
    });
  };

  const handleVerify = () => {
    setVerifying(true);
    router.post(
      route('wp.verify', siteId),
      {},
      {
        onFinish: () => setVerifying(false),
      },
    );
  };

  const copyToken = async (token: string) => {
    await navigator.clipboard.writeText(token);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  // Not connected
  if (!connection) {
    return (
      <Card>
        <CardHeader>
          <CardTitle className="text-lg">WordPress</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-sm text-muted-foreground mb-4">
            Connect your WordPress site to enable content management.
          </p>
          <form onSubmit={handleConnect} className="space-y-3">
            <div>
              <label htmlFor="wp-url" className="sr-only">
                WordPress site URL
              </label>
              <Input
                id="wp-url"
                value={data.wp_url}
                onChange={(e) => setData('wp_url', e.target.value)}
                placeholder="https://yoursite.com"
                aria-invalid={!!errors.wp_url}
                aria-describedby={errors.wp_url ? 'wp-url-error' : undefined}
              />
              {errors.wp_url && (
                <p id="wp-url-error" className="text-sm text-destructive mt-1">
                  {errors.wp_url}
                </p>
              )}
            </div>
            <LoadingButton loading={processing}>
              <ExternalLink className="mr-2 h-4 w-4" />
              Connect WordPress
            </LoadingButton>
          </form>
        </CardContent>
      </Card>
    );
  }

  // Pending (setup_token exists)
  if (connection.setup_token) {
    return (
      <Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <CardTitle className="text-lg">WordPress</CardTitle>
            <ConnectionStatusBadge status="pending" />
          </div>
        </CardHeader>
        <CardContent>
          <p className="text-sm text-muted-foreground mb-3">
            Paste this token in your WP admin &rarr; Settings &rarr; RankWiz AI:
          </p>
          <div className="flex items-center gap-2 rounded-md bg-muted p-3 font-mono text-sm">
            <span className="flex-1 break-all">{connection.setup_token}</span>
            <Button
              variant="ghost"
              size="icon"
              aria-label="Copy setup token"
              onClick={() => copyToken(connection.setup_token!)}
            >
              {copied ? (
                <Check className="h-4 w-4 text-green-500 dark:text-green-400" />
              ) : (
                <Copy className="h-4 w-4" />
              )}
            </Button>
          </div>
          <div className="mt-4">
            <LoadingButton loading={verifying} onClick={handleVerify}>
              Verify Connection
            </LoadingButton>
          </div>
        </CardContent>
      </Card>
    );
  }

  // Connected
  return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between">
          <CardTitle className="text-lg">WordPress</CardTitle>
          <ConnectionStatusBadge status="connected" />
        </div>
      </CardHeader>
      <CardContent>
        <dl className="space-y-2 text-sm">
          <div>
            <dt className="text-muted-foreground">URL</dt>
            <dd className="font-medium">{connection.wp_url}</dd>
          </div>
          {connection.plugin_version && (
            <div>
              <dt className="text-muted-foreground">Plugin version</dt>
              <dd>{connection.plugin_version}</dd>
            </div>
          )}
        </dl>
        <div className="mt-4 pt-4 border-t">
          <SyncStatusIndicator
            lastWebhookAt={connection.last_webhook_at ?? null}
            lastPeriodicSyncAt={connection.last_sync_at ?? null}
            isConnected={connection.status === 'connected'}
          />
        </div>
        <Button
          variant="destructive"
          size="sm"
          className="mt-4"
          onClick={() => setShowDisconnect(true)}
        >
          Disconnect
        </Button>
        <ConfirmDialog
          open={showDisconnect}
          onOpenChange={setShowDisconnect}
          title="Disconnect WordPress?"
          description="This will stop WordPress content syncing and disable AI draft publishing to this site. Your existing drafts and recommendations are preserved. You can reconnect at any time."
          confirmLabel="Disconnect"
          variant="destructive"
          onConfirm={() => router.delete(route('wp.disconnect', siteId))}
        />
      </CardContent>
    </Card>
  );
}