import { router, usePage } from '@inertiajs/react';
import AppLayout from '@/layouts/app-layout';
import { RefreshCw, Plug, AlertTriangle, CheckCircle2 } from 'lucide-react';

type Provider = {
  key: string;
  name: string;
  category: string;
  is_mocked: boolean;
  connected: boolean;
  status: string;
  status_label: string;
  display_name: string | null;
  sync_frequency: string | null;
  last_synced_at: string | null;
  next_sync_at: string | null;
  records_imported: number;
  account_id: number | null;
};

const ATTENTION = ['failed', 'reauthorization_required', 'rate_limited'];

export default function DataManager() {
  const { providers } = usePage().props as unknown as { providers: Provider[] };

  return (
    <AppLayout>
      <div className="mx-auto max-w-6xl px-6 py-8">
        <header className="mb-6">
          <h1 className="text-2xl font-semibold tracking-tight">Data Manager</h1>
          <p className="text-sm text-muted-foreground">
            Connect your business platforms and monitor synchronization.
          </p>
        </header>

        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {providers.map((p) => (
            <div key={p.key} className="rounded-xl border border-border bg-card p-5 shadow-sm">
              <div className="mb-3 flex items-start justify-between">
                <div>
                  <div className="flex items-center gap-2">
                    <span className="font-medium">{p.name}</span>
                    {p.is_mocked && (
                      <span className="rounded bg-amber-100 px-1.5 py-0.5 text-[10px] font-semibold uppercase text-amber-700">
                        Mock
                      </span>
                    )}
                  </div>
                  <span className="text-xs capitalize text-muted-foreground">{p.category}</span>
                </div>
                <StatusPill status={p.status} label={p.status_label} />
              </div>

              {p.connected ? (
                <dl className="space-y-1 text-xs text-muted-foreground">
                  <Row label="Account" value={p.display_name ?? '—'} />
                  <Row label="Frequency" value={p.sync_frequency ?? '—'} />
                  <Row label="Last sync" value={p.last_synced_at ?? 'never'} />
                  <Row label="Records" value={String(p.records_imported)} />
                </dl>
              ) : (
                <p className="text-xs text-muted-foreground">Not connected yet.</p>
              )}

              <div className="mt-4 flex gap-2">
                {p.connected ? (
                  <>
                    <button
                      className="inline-flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-xs font-medium hover:bg-muted"
                      onClick={() => router.post(`/data-manager/${p.account_id}/sync`, {}, { preserveScroll: true })}
                    >
                      <RefreshCw className="size-3.5" /> Sync now
                    </button>
                    <button
                      className="rounded-md border border-border px-3 py-1.5 text-xs font-medium text-red-600 hover:bg-red-50"
                      onClick={() => {
                        if (confirm(`Disconnect ${p.name}?`))
                          router.delete(`/data-manager/${p.account_id}`, { preserveScroll: true });
                      }}
                    >
                      Disconnect
                    </button>
                  </>
                ) : (
                  <button
                    className="inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:opacity-90"
                    onClick={() => router.visit(`/data-manager/connect/${p.key}`)}
                  >
                    <Plug className="size-3.5" /> Connect
                  </button>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>
    </AppLayout>
  );
}

function Row({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex justify-between">
      <dt>{label}</dt>
      <dd className="font-medium text-foreground">{value}</dd>
    </div>
  );
}

function StatusPill({ status, label }: { status: string; label: string }) {
  const attention = ATTENTION.includes(status);
  const healthy = status === 'healthy';
  const cls = attention
    ? 'bg-red-100 text-red-700'
    : healthy
      ? 'bg-green-100 text-green-700'
      : 'bg-gray-100 text-gray-600';
  const Icon = attention ? AlertTriangle : healthy ? CheckCircle2 : null;

  return (
    <span className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-medium ${cls}`}>
      {Icon && <Icon className="size-3" />}
      {label}
    </span>
  );
}