"use client";

import { useCallback, useEffect, useState } from "react";
import { RefreshCw } from "lucide-react";
import { PageHeader } from "@/components/layout/PageHeader";
import { ErrorState } from "@/components/layout/ErrorState";
import { StatusBadge } from "@/components/ui/status-badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { apiFetch } from "@/lib/api";
import {
  connectionBadgeVariant,
  connectionStatusIndicator,
  formatConnectionStatus,
  formatDateTime,
} from "@/lib/geotab-display";
import {
  customerIntegrationCopy,
  resolveCustomerIntegrationState,
} from "@/lib/integration-state";

type Account = {
  id: string;
  databaseName: string;
  server?: string | null;
  username?: string | null;
  connectionStatus: string;
  isConnected: boolean;
  lastCheckedAt?: string | null;
  lastSyncAt?: string | null;
  lastError?: string | null;
  hasCredentials?: boolean;
};

type Status = {
  connectionStatus: string;
  connected: boolean;
  addinStatus: string;
  lastCheckedAt?: string | null;
  lastSyncAt?: string | null;
  lastError?: string | null;
  vehicleCount: number;
  accounts: Account[];
  note?: string;
};

type ActionResult = {
  message: string;
  connectionStatus?: string;
  synced?: number;
  created?: number;
  updated?: number;
  deactivated?: number;
};

export default function IntegrationsPage() {
  const [status, setStatus] = useState<Status | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [actionMessage, setActionMessage] = useState<string | null>(null);
  const [actionError, setActionError] = useState<string | null>(null);
  const [busy, setBusy] = useState<"check" | "sync" | null>(null);

  const load = useCallback(async () => {
    setError(null);
    const data = await apiFetch<Status>("/geotab/status");
    setStatus(data);
  }, []);

  useEffect(() => {
    setLoading(true);
    load()
      .catch((err) => setError(err instanceof Error ? err.message : "Failed"))
      .finally(() => setLoading(false));
  }, [load]);

  async function runCheck() {
    setBusy("check");
    setActionError(null);
    setActionMessage(null);
    try {
      const result = await apiFetch<ActionResult>("/geotab/check-connection", { method: "POST" });
      setActionMessage(result.message);
      await load();
    } catch (err) {
      setActionError(err instanceof Error ? err.message : "Connection check failed");
    } finally {
      setBusy(null);
    }
  }

  async function runSync() {
    setBusy("sync");
    setActionError(null);
    setActionMessage(null);
    try {
      const result = await apiFetch<ActionResult>("/geotab/sync-vehicles", { method: "POST" });
      const synced =
        typeof result.synced === "number"
          ? result.synced
          : (result.created ?? 0) + (result.updated ?? 0);
      setActionMessage(`${result.message} · ${synced} vehicle(s) synchronized`);
      await load();
    } catch (err) {
      setActionError(err instanceof Error ? err.message : "Vehicle sync failed");
    } finally {
      setBusy(null);
    }
  }

  const primary = status?.accounts[0];
  const state = resolveCustomerIntegrationState({
    connectionStatus: status?.connectionStatus,
    hasCredentials: primary?.hasCredentials,
    accountsLength: status?.accounts.length ?? 0,
  });
  const copy = customerIntegrationCopy(state);

  return (
    <>
      <PageHeader
        title="MyGeotab integration"
        description="Connection status for your tenant. Credential configuration is managed by CLERAL administrators."
        actions={
          copy.showActions ? (
            <div className="flex flex-wrap gap-2">
              <Button
                variant="outline"
                size="sm"
                disabled={busy !== null || loading}
                onClick={() => void runCheck()}
              >
                <RefreshCw className={`mr-2 h-4 w-4 ${busy === "check" ? "animate-spin" : ""}`} />
                Check connection
              </Button>
              <Button size="sm" disabled={busy !== null || loading} onClick={() => void runSync()}>
                <RefreshCw className={`mr-2 h-4 w-4 ${busy === "sync" ? "animate-spin" : ""}`} />
                Sync vehicles
              </Button>
            </div>
          ) : null
        }
      />

      {error ? <ErrorState message={error} /> : null}

      {actionError ? (
        <Alert variant="destructive" className="mb-4">
          <AlertTitle>Action failed</AlertTitle>
          <AlertDescription>{actionError}</AlertDescription>
        </Alert>
      ) : null}

      {actionMessage ? (
        <Alert className="mb-4">
          <AlertTitle>Success</AlertTitle>
          <AlertDescription>{actionMessage}</AlertDescription>
        </Alert>
      ) : null}

      {loading ? (
        <Skeleton className="h-40 w-full max-w-2xl" />
      ) : status ? (
        <div className="grid max-w-3xl gap-4">
          {state === "NOT_CONFIGURED" ? (
            <Alert>
              <AlertTitle>MyGeotab integration has not been configured yet.</AlertTitle>
              <AlertDescription>{copy.description}</AlertDescription>
            </Alert>
          ) : null}

          <Card>
            <CardHeader>
              <div className="flex flex-wrap items-center gap-2">
                <CardTitle>MyGeotab Integration</CardTitle>
                <StatusBadge
                  variant={connectionBadgeVariant(state)}
                  indicator={connectionStatusIndicator(state)}
                >
                  {formatConnectionStatus(state)}
                </StatusBadge>
              </div>
              <CardDescription>{copy.description}</CardDescription>
            </CardHeader>
            <CardContent className="grid gap-3 text-sm sm:grid-cols-2">
              {state !== "NOT_CONFIGURED" && primary ? (
                <>
                  <div>
                    <p className="text-muted-foreground">Database</p>
                    <p className="font-medium">{primary.databaseName}</p>
                  </div>
                  <div>
                    <p className="text-muted-foreground">Vehicles</p>
                    <p className="font-medium">{status.vehicleCount}</p>
                  </div>
                  <div>
                    <p className="text-muted-foreground">Last connection check</p>
                    <p className="font-medium">
                      {formatDateTime(status.lastCheckedAt ?? primary.lastCheckedAt)}
                    </p>
                  </div>
                  <div>
                    <p className="text-muted-foreground">Last vehicle sync</p>
                    <p className="font-medium">
                      {formatDateTime(status.lastSyncAt ?? primary.lastSyncAt)}
                    </p>
                  </div>
                </>
              ) : (
                <p className="text-muted-foreground sm:col-span-2">
                  No configuration controls are available here. CLERAL administrators configure
                  MyGeotab credentials securely in the Admin Portal.
                </p>
              )}
            </CardContent>
          </Card>

          {state === "ERROR" ? (
            <Alert variant="destructive">
              <AlertTitle>Integration error</AlertTitle>
              <AlertDescription>
                {status.lastError || primary?.lastError || "The last connection attempt failed."}
                {status.lastCheckedAt || primary?.lastCheckedAt
                  ? ` Last check: ${formatDateTime(status.lastCheckedAt ?? primary?.lastCheckedAt)}.`
                  : ""}
              </AlertDescription>
            </Alert>
          ) : null}

          {status.note ? (
            <Alert>
              <AlertTitle>Environment</AlertTitle>
              <AlertDescription>{status.note}</AlertDescription>
            </Alert>
          ) : null}
        </div>
      ) : null}
    </>
  );
}