import { type FormEvent, useState } from "react";
import { useQueryClient } from "@tanstack/react-query";
import { KeyRound, Plus, ShieldAlert, Trash2 } from "lucide-react";

import { $api } from "@/client/lib/api";
import { type DavScope, type PatCreateResponse, type PatListItem } from "@/client/lib/types";
import { Badge } from "@/client/components/ui/badge";
import { Button } from "@/client/components/ui/button";
import { Card } from "@/client/components/ui/card";
import { ConfirmDialog } from "@/client/components/ui/confirm-dialog";
import { Copyable } from "@/client/components/ui/copyable";
import { Dialog } from "@/client/components/ui/dialog";
import { EmptyState } from "@/client/components/empty-state";
import { ErrorBanner } from "@/client/components/error-banner";
import { Input } from "@/client/components/ui/input";
import { Label } from "@/client/components/ui/label";
import { Skeleton } from "@/client/components/loading-panel";
import { PageHeader } from "@/client/components/ui/page-header";
import { formatDate } from "@/client/lib/format";
import { toast } from "@/client/lib/toast";
import { useNow } from "@/client/hooks/use-now";

const scopeLabels: Record<DavScope, string> = {
  "dav:files:read": "Files (read)",
  "dav:files:write": "Files (write)",
  "dav:caldav:read": "CalDAV (read)",
  "dav:caldav:write": "CalDAV (write)",
  "dav:carddav:read": "CardDAV (read)",
  "dav:carddav:write": "CardDAV (write)",
};

type ScopeArea = "files" | "caldav" | "carddav";
type ScopeLevel = "none" | "read" | "write";

const SCOPE_AREAS: { key: ScopeArea; label: string; hint: string }[] = [
  { key: "files", label: "Files", hint: "WebDAV file tree" },
  { key: "caldav", label: "Calendars", hint: "CalDAV calendars and events" },
  { key: "carddav", label: "Contacts", hint: "CardDAV address books" },
];

function levelsToScopes(levels: Record<ScopeArea, ScopeLevel>): DavScope[] {
  const out: DavScope[] = [];
  for (const area of ["files", "caldav", "carddav"] as const) {
    if (levels[area] === "read") out.push(`dav:${area}:read` as DavScope);
    if (levels[area] === "write") out.push(`dav:${area}:write` as DavScope);
  }
  return out;
}

type Preset = { id: string; label: string; description: string; levels: Record<ScopeArea, ScopeLevel> };

const PRESETS: Preset[] = [
  {
    id: "full",
    label: "Full access",
    description: "Files, Calendars, Contacts — read/write.",
    levels: { files: "write", caldav: "write", carddav: "write" },
  },
  {
    id: "thunderbird",
    label: "Thunderbird",
    description: "Calendars + Contacts, read/write.",
    levels: { files: "none", caldav: "write", carddav: "write" },
  },
  {
    id: "readonly",
    label: "Read-only audit",
    description: "All areas, read only.",
    levels: { files: "read", caldav: "read", carddav: "read" },
  },
];

export function PatsPage() {
  const list = $api.useQuery("get", "/api/v1/pats", {});
  const [creating, setCreating] = useState(false);
  const [revealed, setRevealed] = useState<PatCreateResponse | null>(null);

  return (
    <div className="space-y-8">
      <PageHeader
        icon={<KeyRound className="h-7 w-7" strokeWidth={2} aria-hidden="true" />}
        title="Personal access tokens"
        description="Credentials for DAV clients."
        actions={
          <Button
            variant="primary"
            leftIcon={<Plus className="h-4 w-4" aria-hidden="true" />}
            onClick={() => setCreating(true)}
            aria-label="New token"
          >
            <span className="hidden sm:inline">New token</span>
          </Button>
        }
      />

      {list.isPending ? (
        <div className="space-y-2">
          <Skeleton className="h-16 w-full" />
          <Skeleton className="h-16 w-full" />
        </div>
      ) : list.error ? (
        <ErrorBanner error={list.error} title="Could not load tokens" />
      ) : !list.data || list.data.length === 0 ? (
        <EmptyState
          icon={<KeyRound className="h-7 w-7" aria-hidden="true" />}
          title="No tokens yet"
          description="Create a token to authenticate a DAV client without using the browser session cookie."
        />
      ) : (
        <ul className="space-y-3">
          {list.data.map((pat) => (
            <li key={pat.id}>
              <PatRow pat={pat} />
            </li>
          ))}
        </ul>
      )}

      <CreatePatDialog
        open={creating}
        onClose={() => setCreating(false)}
        onCreated={(pat) => {
          setCreating(false);
          setRevealed(pat);
        }}
      />

      <Dialog
        open={revealed != null}
        onClose={() => setRevealed(null)}
        title="Token created"
        description="Copy this token now — you won't be able to see it again. Treat it like a password."
        size="lg"
        closeOnBackdrop={false}
        footer={
          <Button variant="primary" onClick={() => setRevealed(null)}>
            I've stored it safely
          </Button>
        }
      >
        {revealed ? (
          <div className="space-y-3">
            <div className="flex items-start gap-3 rounded-xl border border-amber-500/20 bg-amber-500/10 px-4 py-3 text-sm text-amber-100">
              <ShieldAlert className="mt-0.5 h-4 w-4 shrink-0 text-amber-300" strokeWidth={2} aria-hidden="true" />
              <p>This is the only time the plaintext token will be shown.</p>
            </div>
            <Copyable value={revealed.token} label="token" />
            <p className="text-xs text-zinc-500">
              Name: <span className="text-zinc-300">{revealed.name}</span>
            </p>
          </div>
        ) : null}
      </Dialog>
    </div>
  );
}

function PatRow({ pat }: { pat: PatListItem }) {
  const queryClient = useQueryClient();
  const [confirming, setConfirming] = useState(false);
  const revoke = $api.useMutation("delete", "/api/v1/pats/{pat_id}", {
    onSuccess: () => {
      toast.success(`Revoked ${pat.name}.`);
      void queryClient.invalidateQueries({ queryKey: ["get", "/api/v1/pats"] });
      setConfirming(false);
    },
  });
  const now = useNow();
  const isRevoked = Boolean(pat.revoked_at);
  const isExpired = pat.expires_at != null && new Date(pat.expires_at).getTime() < now;

  return (
    <Card className="!p-4">
      <div className="flex flex-wrap items-start justify-between gap-4">
        <div className="min-w-0 space-y-2">
          <div className="flex flex-wrap items-center gap-2">
            <h3 className="truncate font-medium text-zinc-100">{pat.name}</h3>
            {isRevoked ? (
              <Badge tone="danger">Revoked</Badge>
            ) : isExpired ? (
              <Badge tone="warning">Expired</Badge>
            ) : (
              <Badge tone="success">Active</Badge>
            )}
          </div>
          <div className="flex flex-wrap gap-1">
            {pat.scopes.map((scope) => (
              <Badge key={scope} tone="neutral">
                {scopeLabels[scope as DavScope] ?? scope}
              </Badge>
            ))}
          </div>
          <p className="text-xs text-zinc-500">
            Created {formatDate(pat.created_at, { relative: true })}
            {pat.expires_at ? ` · expires ${formatDate(pat.expires_at, { relative: true })}` : ""}
            {pat.last_used_at ? ` · last used ${formatDate(pat.last_used_at, { relative: true })}` : ""}
          </p>
        </div>
        {!isRevoked ? (
          <Button
            size="sm"
            variant="danger"
            leftIcon={<Trash2 className="h-3.5 w-3.5" aria-hidden="true" />}
            onClick={() => setConfirming(true)}
          >
            Revoke
          </Button>
        ) : null}
      </div>
      <ConfirmDialog
        open={confirming}
        onClose={() => setConfirming(false)}
        onConfirm={() => revoke.mutate({ params: { path: { pat_id: pat.id } } })}
        title={`Revoke ${pat.name}?`}
        description="Any DAV client using this token will lose access."
        confirmLabel="Revoke"
        destructive
        loading={revoke.isPending}
      >
        <dl className="space-y-2 text-xs">
          <div className="grid gap-1 sm:grid-cols-[4.5rem_1fr]">
            <dt className="text-zinc-500">Client</dt>
            <dd className="break-words text-zinc-200">{pat.name}</dd>
          </div>
          <div className="grid gap-1 sm:grid-cols-[4.5rem_1fr]">
            <dt className="text-zinc-500">PAT ID</dt>
            <dd className="break-all font-mono text-zinc-300">{pat.id}</dd>
          </div>
        </dl>
      </ConfirmDialog>
    </Card>
  );
}

function CreatePatDialog({
  open,
  onClose,
  onCreated,
}: {
  open: boolean;
  onClose: () => void;
  onCreated: (pat: PatCreateResponse) => void;
}) {
  const [name, setName] = useState("");
  const [levels, setLevels] = useState<Record<ScopeArea, ScopeLevel>>({
    files: "none",
    caldav: "none",
    carddav: "none",
  });
  const [expiresAt, setExpiresAt] = useState("");
  const queryClient = useQueryClient();
  const create = $api.useMutation("post", "/api/v1/pats", {
    onSuccess: (pat) => {
      void queryClient.invalidateQueries({ queryKey: ["get", "/api/v1/pats"] });
      setName("");
      setLevels({ files: "none", caldav: "none", carddav: "none" });
      setExpiresAt("");
      onCreated(pat);
    },
  });

  const scopes = levelsToScopes(levels);

  const submit = (event: FormEvent) => {
    event.preventDefault();
    if (!name.trim() || scopes.length === 0) return;
    create.mutate({
      body: {
        name: name.trim(),
        scopes,
        expires_at: expiresAt ? new Date(expiresAt).toISOString() : undefined,
      },
    });
  };

  const setLevel = (area: ScopeArea, next: ScopeLevel) => {
    setLevels((prev) => ({ ...prev, [area]: next }));
  };

  const applyPreset = (preset: Preset) => {
    setLevels(preset.levels);
    if (!name.trim()) setName(preset.label);
  };

  return (
    <Dialog
      open={open}
      onClose={() => {
        if (!create.isPending) onClose();
      }}
      title="New personal access token"
      description="Pick the minimum access this client needs. Write implies read for the same area."
      size="md"
      footer={
        <>
          <Button variant="ghost" onClick={onClose} disabled={create.isPending}>
            Cancel
          </Button>
          <Button
            variant="primary"
            type="submit"
            form="create-pat-form"
            loading={create.isPending}
            disabled={!name.trim() || scopes.length === 0}
          >
            Create token
          </Button>
        </>
      }
    >
      <form id="create-pat-form" onSubmit={submit} className="space-y-5">
        <Label hint="Pick something memorable like a client or device name.">
          Name
          <Input
            autoFocus
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="e.g. Thunderbird on laptop"
            required
            maxLength={128}
          />
        </Label>

        <fieldset className="space-y-3">
          <legend className="text-sm font-medium text-zinc-300">Access</legend>
          <div className="space-y-2">
            {SCOPE_AREAS.map(({ key, label, hint }) => (
              <ScopeRow
                key={key}
                label={label}
                hint={hint}
                level={levels[key]}
                onChange={(next) => setLevel(key, next)}
              />
            ))}
          </div>
          <div className="flex flex-wrap items-center gap-2 pt-1">
            <span className="text-xs text-zinc-500">Common clients:</span>
            {PRESETS.map((preset) => (
              <button
                key={preset.id}
                type="button"
                onClick={() => applyPreset(preset)}
                title={preset.description}
                className="rounded-full border border-zinc-700/60 bg-zinc-800/60 px-2.5 py-0.5 text-xs text-zinc-300 transition-colors hover:border-zinc-600 hover:text-zinc-100"
              >
                {preset.label}
              </button>
            ))}
          </div>
        </fieldset>

        <Label hint="Leave empty for a non-expiring token.">
          Expires
          <Input
            type="datetime-local"
            value={expiresAt}
            onChange={(e) => setExpiresAt(e.target.value)}
            min={new Date().toISOString().slice(0, 16)}
          />
        </Label>

        {create.error ? <ErrorBanner error={create.error} title="Could not create token" /> : null}
      </form>
    </Dialog>
  );
}

function ScopeRow({
  label,
  hint,
  level,
  onChange,
}: {
  label: string;
  hint: string;
  level: ScopeLevel;
  onChange: (next: ScopeLevel) => void;
}) {
  const options: { value: ScopeLevel; label: string }[] = [
    { value: "none", label: "Off" },
    { value: "read", label: "Read" },
    { value: "write", label: "Read+Write" },
  ];

  return (
    <div className="flex flex-col gap-2 rounded-xl border border-zinc-700/60 bg-zinc-800/40 px-3 py-2 sm:flex-row sm:items-center sm:justify-between">
      <div className="min-w-0">
        <p className="text-sm font-medium text-zinc-200">{label}</p>
        <p className="text-xs text-zinc-500">{hint}</p>
      </div>
      <div
        role="radiogroup"
        aria-label={`${label} access`}
        className="grid grid-cols-3 rounded-lg border border-zinc-700/60 bg-zinc-900/60 p-0.5 text-xs sm:inline-flex"
      >
        {options.map(({ value, label: optLabel }) => {
          const selected = level === value;
          return (
            <button
              key={value}
              type="button"
              role="radio"
              aria-checked={selected}
              onClick={() => onChange(value)}
              className={`rounded-md px-2.5 py-1 text-center transition-colors ${
                selected ? "bg-accent-500/15 text-accent-200" : "text-zinc-400 hover:bg-zinc-800/70 hover:text-zinc-100"
              }`}
            >
              {optLabel}
            </button>
          );
        })}
      </div>
    </div>
  );
}