'use client';

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { toast } from 'sonner';
import { RefreshCw, Smartphone, CheckCircle2, WifiOff, Link2Off } 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';
import { Spinner } from '@/components/ui/spinners';

type SessionStatus = 'connected' | 'qr_ready' | 'initializing' | 'connecting' | 'loading' | 'not_found' | 'failed' | 'disconnected' | 'error' | 'unknown';

interface StatusResponse {
  status: SessionStatus;
  session: { me?: { id?: string; name?: string } } | null;
}

interface QrResponse {
  ok?: boolean;
  qr?: string | null;
  qrBase64?: string | null;
}

async function fetchStatus(): Promise<StatusResponse> {
  const res = await fetch('/api/admin/notification-wa', { cache: 'no-store' });
  return res.json();
}

async function fetchQr(): Promise<QrResponse> {
  const res = await fetch('/api/admin/notification-wa/qr', { cache: 'no-store' });
  return res.json();
}

async function sessionAction(action: 'reconnect' | 'disconnect'): Promise<StatusResponse> {
  const res = await fetch('/api/admin/notification-wa', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ action }),
  });
  return res.json();
}

export function NotificationPhoneCard() {
  const qc = useQueryClient();

  const { data: statusData, isLoading: statusLoading } = useQuery<StatusResponse>({
    queryKey: ['notification-wa-status'],
    queryFn: fetchStatus,
    refetchInterval: (query) =>
      query.state.data?.status === 'connected' ? 30_000 : 4_000,
  });

  const status = statusData?.status ?? 'unknown';
  const phoneNumber = statusData?.session?.me?.id?.replace('@s.whatsapp.net', '');

  const awaitingScan = status === 'qr_ready' || status === 'initializing';
  const syncing = status === 'connecting' || status === 'loading';

  const {
    data: qrData,
    isLoading: qrLoading,
    refetch: refetchQr,
    isFetching: qrFetching,
  } = useQuery<QrResponse>({
    queryKey: ['notification-wa-qr'],
    queryFn: fetchQr,
    enabled: awaitingScan,
    // Poll every 4 s while awaiting scan so the QR appears as soon as the
    // sidecar finishes initializing (it takes ~2–4 s after session creation).
    refetchInterval: awaitingScan ? 4_000 : false,
    retry: 10,
    retryDelay: 2_000,
  });

  const { mutate: doAction, isPending } = useMutation({
    mutationFn: sessionAction,
    onSuccess: (data) => {
      qc.setQueryData(['notification-wa-status'], data);
      qc.invalidateQueries({ queryKey: ['notification-wa-qr'] });
    },
    onError: () => toast.error('Action failed. Please try again.'),
  });

  const qrSrc = qrData?.qrBase64 ?? qrData?.qr ?? null;

  return (
    <Card>
      <CardHeader>
        <div className="flex items-start justify-between gap-4">
          <div className="space-y-1">
            <CardTitle className="flex items-center gap-2 text-base">
              <Smartphone className="size-4 shrink-0" />
              Sanad notification phone
            </CardTitle>
            <CardDescription>
              The WhatsApp account used to notify brands and creators when they
              receive a new chat message while offline.
            </CardDescription>
          </div>
          <StatusBadge status={status} loading={statusLoading} />
        </div>
      </CardHeader>

      <CardContent className="space-y-4">
        {statusLoading && (
          <div className="flex items-center gap-2 text-sm text-muted-foreground">
            <Spinner className="size-4 animate-spin" />
            Checking connection…
          </div>
        )}

        {!statusLoading && status === 'connected' && (
          <div className="flex items-center gap-2 text-sm text-green-700 bg-green-50 dark:bg-green-950/30 dark:text-green-400 rounded-lg px-3 py-2 border border-green-200 dark:border-green-900">
            <CheckCircle2 className="size-4 shrink-0" />
            <span>
              Connected as <strong>+{phoneNumber}</strong>. Notifications are active.
            </span>
          </div>
        )}

        {!statusLoading && (status === 'not_found' || status === 'error' || status === 'unknown' || status === 'disconnected') && (
          <div className="flex items-center gap-2 text-sm text-muted-foreground bg-muted rounded-lg px-3 py-2">
            <WifiOff className="size-4 shrink-0" />
            No notification session configured. Click <strong>Connect</strong> to set one up.
          </div>
        )}

        {!statusLoading && status === 'failed' && (
          <div className="flex items-center gap-2 text-sm text-red-600 bg-red-50 dark:bg-red-950/30 rounded-lg px-3 py-2 border border-red-200 dark:border-red-900">
            <WifiOff className="size-4 shrink-0" />
            Session failed to initialize. Click <strong>Connect</strong> to try again.
          </div>
        )}

        {!statusLoading && syncing && (
          <div className="flex items-center gap-3 text-sm text-blue-700 bg-blue-50 dark:bg-blue-950/30 dark:text-blue-400 rounded-lg px-3 py-3 border border-blue-200 dark:border-blue-900">
            <Spinner className="size-5 animate-spin shrink-0" />
            <div className="space-y-0.5">
              <p className="font-medium">Syncing messages and media…</p>
              <p className="text-xs opacity-80">This may take a minute. The status will update automatically when ready.</p>
            </div>
          </div>
        )}

        {!statusLoading && awaitingScan && (
          <div className="space-y-3">
            <p className="text-sm text-muted-foreground">
              Open WhatsApp on your dedicated notification phone and scan this QR code:
            </p>
            <p className="text-xs font-medium text-foreground">
              WhatsApp → Settings → Linked Devices → Link a Device
            </p>

            <div className="inline-flex items-center justify-center rounded-xl border bg-white p-3 shadow-sm">
              {qrLoading || qrFetching || !qrSrc ? (
                <div className="size-52 flex flex-col items-center justify-center gap-2 text-muted-foreground">
                  <Spinner className="size-6 animate-spin" />
                  <span className="text-xs">Loading QR…</span>
                </div>
              ) : (
                // eslint-disable-next-line @next/next/no-img-element
                <img
                  src={qrSrc}
                  alt="WhatsApp QR code — scan to connect"
                  width={208}
                  height={208}
                  className="block"
                />
              )}
            </div>

            <div className="flex items-center gap-2">
              <Button
                variant="outline"
                size="sm"
                onClick={() => refetchQr()}
                disabled={qrLoading || qrFetching}
              >
                <RefreshCw className="size-3.5 mr-1.5" />
                Refresh QR
              </Button>
              <span className="text-xs text-muted-foreground">QR expires every 60 seconds</span>
            </div>
          </div>
        )}

        <div className="pt-3 border-t flex flex-wrap gap-2">
          {status !== 'connected' && !syncing && (
            <Button onClick={() => doAction('reconnect')} disabled={isPending}>
              {isPending ? <Spinner className="size-4 animate-spin mr-2" /> : null}
              {awaitingScan ? 'Regenerate session' : 'Connect'}
            </Button>
          )}
          {status === 'connected' && (
            <Button
              variant="destructive"
              onClick={() => doAction('disconnect')}
              disabled={isPending}
            >
              {isPending ? (
                <Spinner className="size-4 animate-spin mr-2" />
              ) : (
                <Link2Off className="size-4 mr-2" />
              )}
              Disconnect
            </Button>
          )}
        </div>
      </CardContent>
    </Card>
  );
}

function StatusBadge({ status, loading }: { status: SessionStatus; loading: boolean }) {
  if (loading) {
    return (
      <Badge variant="secondary" appearance="outline" size="md">
        <Spinner className="size-3 animate-spin mr-1" />
        Checking
      </Badge>
    );
  }
  if (status === 'connected') {
    return (
      <Badge variant="success" appearance="outline" size="md">
        Connected
      </Badge>
    );
  }
  if (status === 'qr_ready' || status === 'initializing') {
    return (
      <Badge variant="warning" appearance="outline" size="md">
        Awaiting scan
      </Badge>
    );
  }
  if (status === 'connecting' || status === 'loading') {
    return (
      <Badge variant="secondary" appearance="outline" size="md">
        <Spinner className="size-3 animate-spin mr-1" />
        Syncing
      </Badge>
    );
  }
  if (status === 'failed') {
    return (
      <Badge variant="destructive" appearance="outline" size="md">
        Failed
      </Badge>
    );
  }
  return (
    <Badge variant="secondary" appearance="outline" size="md">
      Disconnected
    </Badge>
  );
}