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

import { $api } from "@/client/lib/api";
import { useMe } from "@/client/auth/use-me";
import type { Addressbook } from "@/client/lib/types";
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, Textarea } from "@/client/components/ui/input";
import { Label } from "@/client/components/ui/label";
import { PageHeader } from "@/client/components/ui/page-header";
import { Skeleton } from "@/client/components/loading-panel";
import { formatDate } from "@/client/lib/format";
import { toast } from "@/client/lib/toast";

const ADDRESSBOOKS_KEY = ["get", "/api/v1/addressbooks"] as const;

function trimTrailingSlash(value: string): string {
  return value.endsWith("/") ? value.slice(0, -1) : value;
}

export function AddressbooksPage() {
  const list = $api.useQuery("get", "/api/v1/addressbooks", {});
  const me = useMe();
  const davOrigin = me.data ? trimTrailingSlash(me.data.urls.root) : "";
  const [creating, setCreating] = useState(false);
  const [editing, setEditing] = useState<Addressbook | null>(null);

  return (
    <div className="space-y-8">
      <PageHeader
        icon={<BookUser className="h-7 w-7" strokeWidth={2} aria-hidden="true" />}
        title="Address books"
        description="Contact collections exposed over CardDAV."
        actions={
          <Button
            variant="primary"
            leftIcon={<Plus className="h-4 w-4" aria-hidden="true" />}
            onClick={() => setCreating(true)}
            aria-label="New address book"
          >
            <span className="hidden sm:inline">New address book</span>
          </Button>
        }
      />

      {list.isPending ? (
        <div className="grid gap-3 sm:grid-cols-2">
          <Skeleton className="h-24" />
          <Skeleton className="h-24" />
        </div>
      ) : list.error ? (
        <ErrorBanner error={list.error} title="Could not load address books" />
      ) : !list.data || list.data.length === 0 ? (
        <EmptyState
          icon={<BookUser className="h-7 w-7" aria-hidden="true" />}
          title="No address books yet"
          description="Create your first address book. You can add contacts from any CardDAV client afterwards."
          action={
            <Button
              variant="primary"
              leftIcon={<Plus className="h-4 w-4" aria-hidden="true" />}
              onClick={() => setCreating(true)}
            >
              Create address book
            </Button>
          }
        />
      ) : (
        <ul className="grid gap-3 sm:grid-cols-2">
          {list.data.map((book) => (
            <li key={book.id}>
              <AddressbookRow book={book} davOrigin={davOrigin} onEdit={() => setEditing(book)} />
            </li>
          ))}
        </ul>
      )}

      <AddressbookFormDialog mode="create" open={creating} onClose={() => setCreating(false)} existing={null} />
      <AddressbookFormDialog mode="edit" open={editing != null} onClose={() => setEditing(null)} existing={editing} />
    </div>
  );
}

function AddressbookRow({ book, davOrigin, onEdit }: { book: Addressbook; davOrigin: string; onEdit: () => void }) {
  const queryClient = useQueryClient();
  const [confirming, setConfirming] = useState(false);
  const remove = $api.useMutation("delete", "/api/v1/addressbooks/{addressbook_id}", {
    onSuccess: () => {
      toast.success(`Deleted ${book.display_name}.`);
      void queryClient.invalidateQueries({ queryKey: ADDRESSBOOKS_KEY });
      setConfirming(false);
    },
  });

  return (
    <Card className="!p-4">
      <div className="flex items-start justify-between gap-3">
        <div className="min-w-0 space-y-1">
          <h3 className="truncate font-medium text-zinc-100">{book.display_name}</h3>
          {book.description ? <p className="text-sm text-zinc-400">{book.description}</p> : null}
          <p className="font-mono text-xs text-zinc-500">{book.name}</p>
          <p className="text-xs text-zinc-500">Modified {formatDate(book.modified_at, { relative: true })}</p>
        </div>
        <div className="flex shrink-0 flex-col items-end gap-1">
          <Button
            size="sm"
            variant="ghost"
            leftIcon={<Pencil className="h-3 w-3" aria-hidden="true" />}
            onClick={onEdit}
          >
            Edit
          </Button>
          <Button
            size="sm"
            variant="danger"
            leftIcon={<Trash2 className="h-3 w-3" aria-hidden="true" />}
            onClick={() => setConfirming(true)}
          >
            Delete
          </Button>
        </div>
      </div>
      <details className="mt-3 border-t border-zinc-800/60 pt-3 text-xs text-zinc-400">
        <summary className="cursor-pointer text-zinc-300">DAV URL</summary>
        <div className="mt-2">
          <Copyable
            value={book.href}
            copyValue={davOrigin ? `${davOrigin}${book.href}` : book.href}
            label="address book URL"
          />
        </div>
      </details>
      <ConfirmDialog
        open={confirming}
        onClose={() => setConfirming(false)}
        onConfirm={() => remove.mutate({ params: { path: { addressbook_id: book.id } } })}
        title={`Delete ${book.display_name}?`}
        description="All contacts in this address book will be removed. This cannot be undone."
        confirmLabel="Delete address book"
        destructive
        loading={remove.isPending}
      >
        <p className="text-xs text-zinc-500">
          DAV URL: <span className="font-mono text-zinc-300">{book.href}</span>
        </p>
      </ConfirmDialog>
    </Card>
  );
}

function AddressbookFormDialog({
  mode,
  open,
  onClose,
  existing,
}: {
  mode: "create" | "edit";
  open: boolean;
  onClose: () => void;
  existing: Addressbook | null;
}) {
  const queryClient = useQueryClient();
  const create = $api.useMutation("post", "/api/v1/addressbooks", {
    onSuccess: () => {
      void queryClient.invalidateQueries({ queryKey: ADDRESSBOOKS_KEY });
      onClose();
    },
  });
  const update = $api.useMutation("patch", "/api/v1/addressbooks/{addressbook_id}", {
    onSuccess: () => {
      void queryClient.invalidateQueries({ queryKey: ADDRESSBOOKS_KEY });
      onClose();
    },
  });

  const pending = mode === "create" ? create.isPending : update.isPending;
  const error = mode === "create" ? create.error : update.error;
  const formId = useId();

  return (
    <Dialog
      open={open}
      onClose={() => {
        if (!pending) onClose();
      }}
      title={mode === "create" ? "New address book" : `Edit ${existing?.display_name ?? "address book"}`}
      description={mode === "create" ? "Create a contact collection." : "Update this address book."}
      footer={
        <>
          <Button variant="ghost" onClick={onClose} disabled={pending}>
            Cancel
          </Button>
          <Button variant="primary" type="submit" form={formId} loading={pending}>
            {mode === "create" ? "Create" : "Save"}
          </Button>
        </>
      }
    >
      <AddressbookForm
        key={existing?.id ?? "create"}
        formId={formId}
        mode={mode}
        existing={existing}
        onSubmit={(values) => {
          if (mode === "create") {
            create.mutate({
              body: {
                name: values.name?.trim() ?? "",
                display_name: values.display_name,
                description: values.description ?? undefined,
              },
            });
          } else if (existing) {
            update.mutate({
              params: { path: { addressbook_id: existing.id } },
              body: {
                display_name: values.display_name,
                description: values.description,
              },
            });
          }
        }}
        error={error}
      />
    </Dialog>
  );
}

function AddressbookForm({
  formId,
  mode,
  existing,
  onSubmit,
  error,
}: {
  formId: string;
  mode: "create" | "edit";
  existing: Addressbook | null;
  onSubmit: (values: { name?: string; display_name?: string; description?: string | null }) => void;
  error: unknown;
}) {
  const [name, setName] = useState(existing?.name ?? "");
  const [displayName, setDisplayName] = useState(existing?.display_name ?? "");
  const [description, setDescription] = useState(existing?.description ?? "");

  const submit = (event: FormEvent) => {
    event.preventDefault();
    if (mode === "create") {
      onSubmit({
        name: name.trim(),
        display_name: displayName.trim() || undefined,
        description: description.trim() || undefined,
      });
    } else {
      onSubmit({
        display_name: displayName.trim() || undefined,
        description: description.trim() ? description.trim() : null,
      });
    }
  };

  return (
    <form id={formId} onSubmit={submit} className="space-y-4">
      {mode === "create" ? (
        <Label hint="The internal name (segment in the DAV URL).">
          Name
          <Input
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="contacts"
            required
            maxLength={128}
          />
        </Label>
      ) : null}
      <Label>
        Display name
        <Input
          value={displayName}
          onChange={(e) => setDisplayName(e.target.value)}
          placeholder="Contacts"
          maxLength={256}
        />
      </Label>
      <Label>
        Description
        <Textarea value={description} onChange={(e) => setDescription(e.target.value)} maxLength={4096} />
      </Label>
      {error ? <ErrorBanner error={error} /> : null}
    </form>
  );
}