import { toast } from "sonner";
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";

type ControlBarProps = {
  adminApiKey: string;
  gatewayApiKey: string;
  managementApiKey: string;
  onAdminApiKeyChange: (value: string) => void;
  onGatewayApiKeyChange: (value: string) => void;
  onManagementApiKeyChange: (value: string) => void;
};

export default function ControlBar({
  adminApiKey,
  gatewayApiKey,
  managementApiKey,
  onAdminApiKeyChange,
  onGatewayApiKeyChange,
  onManagementApiKeyChange,
}: ControlBarProps) {
  return (
    <Card className="rounded-none border-x-0 border-t-0">
      <CardHeader className="pb-2">
        <CardTitle className="text-sm">Connection + Key Controls</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid gap-3 xl:grid-cols-[1fr_1fr_1fr_auto]">
          <div className="space-y-1">
            <Label>Admin API Key</Label>
            <Input value={adminApiKey} onChange={(event) => onAdminApiKeyChange(event.target.value)} placeholder="ATHENA_KEY_12" />
          </div>
          <div className="space-y-1">
            <Label>Gateway API Key</Label>
            <Input value={gatewayApiKey} onChange={(event) => onGatewayApiKeyChange(event.target.value)} placeholder="ath_xxx.secret" />
          </div>
          <div className="space-y-1">
            <Label>Management API Key</Label>
            <Input value={managementApiKey} onChange={(event) => onManagementApiKeyChange(event.target.value)} placeholder="client-bound management key" />
          </div>
          <div className="flex items-end">
            <Button
              variant="outline"
              onClick={() => {
                navigator.clipboard.writeText(
                  JSON.stringify(
                    {
                      adminApiKey,
                      gatewayApiKey,
                      managementApiKey,
                    },
                    null,
                    2,
                  ),
                );
                toast.success("Copied key snapshot to clipboard");
              }}
            >
              Copy Snapshot
            </Button>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}
