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

import { $api } from "@/client/lib/api";
import { useMe } from "@/client/auth/use-me";
import type { Calendar as CalendarRecord } 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 CALENDARS_KEY = ["get", "/api/v1/calendars"] as const;

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

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

  return (
    <div className="space-y-8">
      <PageHeader
        icon={<Calendar className="h-7 w-7" strokeWidth={2} aria-hidden="true" />}
        title="Calendars"
        description="Calendar collections exposed over CalDAV."
        actions={
          <Button
            variant="primary"
            leftIcon={<Plus className="h-4 w-4" aria-hidden="true" />}
            onClick={() => setCreating(true)}
            aria-label="New calendar"
          >
            <span className="hidden sm:inline">New calendar</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 calendars" />
      ) : !list.data || list.data.length === 0 ? (
        <EmptyState
          icon={<Calendar className="h-7 w-7" aria-hidden="true" />}
          title="No calendars yet"
          description="Create your first calendar collection. You can add events from any CalDAV client afterwards."
          action={
            <Button
              variant="primary"
              leftIcon={<Plus className="h-4 w-4" aria-hidden="true" />}
              onClick={() => setCreating(true)}
            >
              Create calendar
            </Button>
          }
        />
      ) : (
        <ul className="grid gap-3 sm:grid-cols-2">
          {list.data.map((cal) => (
            <li key={cal.id}>
              <CalendarRow calendar={cal} davOrigin={davOrigin} onEdit={() => setEditing(cal)} />
            </li>
          ))}
        </ul>
      )}

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

function CalendarRow({
  calendar,
  davOrigin,
  onEdit,
}: {
  calendar: CalendarRecord;
  davOrigin: string;
  onEdit: () => void;
}) {
  const queryClient = useQueryClient();
  const [confirming, setConfirming] = useState(false);
  const remove = $api.useMutation("delete", "/api/v1/calendars/{calendar_id}", {
    onSuccess: () => {
      toast.success(`Deleted ${calendar.display_name}.`);
      void queryClient.invalidateQueries({ queryKey: CALENDARS_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">
          <div className="flex items-center gap-2">
            <span
              aria-hidden="true"
              className="inline-block h-3 w-3 rounded-full border border-zinc-700/60"
              style={{ backgroundColor: calendar.color ?? "transparent" }}
            />
            <h3 className="truncate font-medium text-zinc-100">{calendar.display_name}</h3>
          </div>
          {calendar.description ? <p className="text-sm text-zinc-400">{calendar.description}</p> : null}
          <p className="font-mono text-xs text-zinc-500">{calendar.name}</p>
          <p className="text-xs text-zinc-500">Modified {formatDate(calendar.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={calendar.href}
            copyValue={davOrigin ? `${davOrigin}${calendar.href}` : calendar.href}
            label="calendar URL"
          />
        </div>
      </details>
      <ConfirmDialog
        open={confirming}
        onClose={() => setConfirming(false)}
        onConfirm={() => remove.mutate({ params: { path: { calendar_id: calendar.id } } })}
        title={`Delete ${calendar.display_name}?`}
        description="All events in this calendar will be removed. This cannot be undone."
        confirmLabel="Delete calendar"
        destructive
        loading={remove.isPending}
      >
        <p className="text-xs text-zinc-500">
          DAV URL: <span className="font-mono text-zinc-300">{calendar.href}</span>
        </p>
      </ConfirmDialog>
    </Card>
  );
}

function CalendarFormDialog({
  mode,
  open,
  onClose,
  existing,
}: {
  mode: "create" | "edit";
  open: boolean;
  onClose: () => void;
  existing: CalendarRecord | null;
}) {
  const queryClient = useQueryClient();
  const create = $api.useMutation("post", "/api/v1/calendars", {
    onSuccess: () => {
      void queryClient.invalidateQueries({ queryKey: CALENDARS_KEY });
      onClose();
    },
  });
  const update = $api.useMutation("patch", "/api/v1/calendars/{calendar_id}", {
    onSuccess: () => {
      void queryClient.invalidateQueries({ queryKey: CALENDARS_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 calendar" : `Edit ${existing?.display_name ?? "calendar"}`}
      description={mode === "create" ? "Create a calendar collection." : "Update this calendar's metadata."}
      footer={
        <>
          <Button variant="ghost" onClick={onClose} disabled={pending}>
            Cancel
          </Button>
          <Button variant="primary" type="submit" form={formId} loading={pending}>
            {mode === "create" ? "Create" : "Save"}
          </Button>
        </>
      }
    >
      <CalendarForm
        key={existing?.id ?? "create"}
        formId={formId}
        mode={mode}
        existing={existing}
        onSubmit={(values) => {
          if (mode === "create") {
            create.mutate({ body: values as Parameters<typeof create.mutate>[0]["body"] });
          } else if (existing) {
            update.mutate({
              params: { path: { calendar_id: existing.id } },
              body: values,
            });
          }
        }}
        error={error}
      />
    </Dialog>
  );
}

function CalendarForm({
  formId,
  mode,
  existing,
  onSubmit,
  error,
}: {
  formId: string;
  mode: "create" | "edit";
  existing: CalendarRecord | null;
  onSubmit: (values: {
    name?: string;
    display_name?: string;
    description?: string | null;
    color?: string | null;
    order_index?: number;
  }) => void;
  error: unknown;
}) {
  const [name, setName] = useState(existing?.name ?? "");
  const [displayName, setDisplayName] = useState(existing?.display_name ?? "");
  const [description, setDescription] = useState(existing?.description ?? "");
  const [color, setColor] = useState(existing?.color ?? "#747178");

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

  return (
    <form id={formId} onSubmit={submit} className="space-y-4">
      {mode === "create" ? (
        <Label hint="The internal name (segment in the DAV URL). Letters, digits, dashes; min 1, max 128.">
          Name
          <Input
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="personal"
            required
            maxLength={128}
          />
        </Label>
      ) : null}
      <Label>
        Display name
        <Input
          value={displayName}
          onChange={(e) => setDisplayName(e.target.value)}
          placeholder="Personal calendar"
          maxLength={256}
        />
      </Label>
      <Label>
        Description
        <Textarea value={description} onChange={(e) => setDescription(e.target.value)} maxLength={4096} />
      </Label>
      <Label hint="Used as a hint by CalDAV clients that support color metadata.">
        Color
        <div className="flex items-center gap-3">
          <input
            type="color"
            value={color || "#747178"}
            onChange={(e) => setColor(e.target.value)}
            className="h-10 w-14 cursor-pointer rounded-xl border border-zinc-700/60 bg-zinc-800/80"
            aria-label="Calendar color"
          />
          <Input value={color} onChange={(e) => setColor(e.target.value)} maxLength={64} className="font-mono" />
        </div>
      </Label>
      {error ? <ErrorBanner error={error} /> : null}
    </form>
  );
}