import { AthenaClientRecord, RuntimeAthenaClient } from "@/app/lib/api";
import { Badge } from "@/app/components/ui/badge";
import { Button } from "@/app/components/ui/button";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/app/components/ui/card";
import { Input } from "@/app/components/ui/input";
import { Label } from "@/app/components/ui/label";
import { Textarea } from "@/app/components/ui/textarea";

type AthenaClientsTabProps = {
  busy: boolean;
  adminApiKey: string;
  adminClients: AthenaClientRecord[];
  runtimeClients: RuntimeAthenaClient[];
  onReload: () => void;
  newClientJson: string;
  onNewClientJsonChange: (value: string) => void;
  onCreateClient: () => void;
  patchClientName: string;
  onPatchClientNameChange: (value: string) => void;
  patchClientJson: string;
  onPatchClientJsonChange: (value: string) => void;
  onUpdateClient: () => void;
  freezeClientName: string;
  onFreezeClientNameChange: (value: string) => void;
  freezeClientValue: boolean;
  onFreezeClientValueChange: (value: boolean) => void;
  onApplyFreeze: () => void;
  deleteClientName: string;
  onDeleteClientNameChange: (value: string) => void;
  onDeleteClient: () => void;
};

export default function AthenaClientsTab({
  busy,
  adminApiKey,
  adminClients,
  runtimeClients,
  onReload,
  newClientJson,
  onNewClientJsonChange,
  onCreateClient,
  patchClientName,
  onPatchClientNameChange,
  patchClientJson,
  onPatchClientJsonChange,
  onUpdateClient,
  freezeClientName,
  onFreezeClientNameChange,
  freezeClientValue,
  onFreezeClientValueChange,
  onApplyFreeze,
  deleteClientName,
  onDeleteClientNameChange,
  onDeleteClient,
}: AthenaClientsTabProps) {
  return (
    <section className="grid h-full min-h-0 gap-4 lg:grid-cols-[1fr_420px]">
      <Card className="h-full min-h-0">
        <CardHeader>
          <div className="flex items-center justify-between">
            <CardTitle>Athena Clients</CardTitle>
            <Button
              onClick={onReload}
              size="sm"
              variant="outline"
              disabled={busy}
            >
              Reload
            </Button>
          </div>
        </CardHeader>
        <CardContent className="grid h-[calc(100vh-190px)] min-h-0 gap-3">
          <div className="min-h-0 overflow-auto rounded-md border border-border">
            {adminClients.map((client) => (
              <div
                key={client.client_name}
                className="border-b border-border p-3 text-sm"
              >
                <div className="flex items-center justify-between">
                  <span className="font-medium">{client.client_name}</span>
                  <div className="flex gap-1">
                    <Badge variant="secondary">
                      active: {String(client.is_active)}
                    </Badge>
                    <Badge variant="secondary">
                      frozen: {String(client.is_frozen)}
                    </Badge>
                  </div>
                </div>
                <p className="text-xs text-muted-foreground">
                  {client.description ?? "No description"}
                </p>
              </div>
            ))}
          </div>
          <div>
            <Label className="mb-2 block">Runtime registry</Label>
            <div className="max-h-40 overflow-auto rounded-md border border-border">
              {runtimeClients.map((client) => (
                <div
                  key={`${client.client_name}-${client.source}`}
                  className="border-b border-border px-3 py-2 text-xs text-muted-foreground"
                >
                  {client.client_name} · connected:{" "}
                  {String(client.pool_connected)}
                </div>
              ))}
            </div>
          </div>
        </CardContent>
      </Card>

      <Card className="h-full min-h-0">
        <CardHeader>
          <CardTitle>Client actions</CardTitle>
        </CardHeader>
        <CardContent className="h-[calc(100vh-190px)] space-y-3 overflow-auto">
          <div className="space-y-2 rounded-md border border-border p-3">
            <Label>Create client</Label>
            <Textarea
              value={newClientJson}
              onChange={(event) => onNewClientJsonChange(event.target.value)}
              rows={7}
              className="font-mono text-xs"
            />
            <Button
              onClick={onCreateClient}
              size="sm"
              disabled={busy || !adminApiKey.trim()}
            >
              Create
            </Button>
          </div>
          <div className="space-y-2 rounded-md border border-border p-3">
            <Label>Patch client</Label>
            <Input
              value={patchClientName}
              onChange={(event) => onPatchClientNameChange(event.target.value)}
              placeholder="client_name"
            />
            <Textarea
              value={patchClientJson}
              onChange={(event) => onPatchClientJsonChange(event.target.value)}
              rows={6}
              className="font-mono text-xs"
            />
            <Button
              onClick={onUpdateClient}
              size="sm"
              variant="secondary"
              disabled={busy || !adminApiKey.trim()}
            >
              Update
            </Button>
          </div>
          <div className="space-y-2 rounded-md border border-border p-3">
            <Label>Freeze / unfreeze</Label>
            <div className="grid grid-cols-[1fr_auto] gap-2">
              <Input
                value={freezeClientName}
                onChange={(event) =>
                  onFreezeClientNameChange(event.target.value)
                }
                placeholder="client_name"
              />
              <select
                value={String(freezeClientValue)}
                onChange={(event) =>
                  onFreezeClientValueChange(event.target.value === "true")
                }
                className="h-9 rounded-md border border-border bg-surface-subtle px-2 text-xs"
              >
                <option value="true">freeze</option>
                <option value="false">unfreeze</option>
              </select>
            </div>
            <Button
              onClick={onApplyFreeze}
              size="sm"
              variant="secondary"
              disabled={busy || !adminApiKey.trim()}
            >
              Apply
            </Button>
          </div>
          <div className="space-y-2 rounded-md border border-destructive-border p-3">
            <Label>Delete client</Label>
            <Input
              value={deleteClientName}
              onChange={(event) => onDeleteClientNameChange(event.target.value)}
              placeholder="client_name"
            />
            <Button
              onClick={onDeleteClient}
              size="sm"
              variant="destructive"
              disabled={busy || !adminApiKey.trim()}
            >
              Delete
            </Button>
          </div>
        </CardContent>
      </Card>
    </section>
  );
}
