import { type ReactNode } from "react";
import { Copy, UserCircle2 } from "lucide-react";

import { useMe } from "@/client/auth/use-me";
import { ErrorBanner } from "@/client/components/error-banner";
import { LoadingPanel } from "@/client/components/loading-panel";
import { Card, CardDescription, CardHeader, CardTitle } from "@/client/components/ui/card";
import { Copyable } from "@/client/components/ui/copyable";
import { PageHeader } from "@/client/components/ui/page-header";
import { Button } from "@/client/components/ui/button";
import { toast } from "@/client/lib/toast";

function FieldRow({ label, children }: { label: string; children: ReactNode }) {
  return (
    <div className="flex flex-col gap-1.5 border-b border-zinc-800/60 py-3 last:border-0">
      <dt className="text-xs font-medium uppercase tracking-widest text-zinc-500">{label}</dt>
      <dd>{children}</dd>
    </div>
  );
}

export function MePage() {
  const me = useMe();
  if (me.isPending) return <LoadingPanel label="Loading your profile…" />;
  if (me.error) return <ErrorBanner error={me.error} title="Could not load your profile" />;
  if (!me.data) return <ErrorBanner error={"Not signed in."} title="No active session" />;

  const { subject_id, host_label, control_plane_host, dav_host, urls } = me.data;

  const copyAll = () => {
    const payload = `WebDAV / Files: ${urls.files}\nCalDAV: ${urls.caldav}\nCardDAV: ${urls.carddav}`;
    void navigator.clipboard.writeText(payload).then(
      () => toast.success("Copied all DAV URLs."),
      () => toast.error("Could not copy all DAV URLs."),
    );
  };

  return (
    <div className="space-y-8">
      <PageHeader
        icon={<UserCircle2 className="h-7 w-7" strokeWidth={2} aria-hidden="true" />}
        title="Your profile"
        description="Paste a discovery URL into your DAV client to reach this account."
      />

      <Card>
        <CardHeader>
          <div>
            <CardTitle>Discovery URLs</CardTitle>
            <CardDescription>
              Most clients only need the root URL — calendar-home and addressbook-home are exposed via DAV discovery
              from there.
            </CardDescription>
          </div>
          <Button
            size="sm"
            variant="ghost"
            onClick={copyAll}
            leftIcon={<Copy className="h-3 w-3" aria-hidden="true" />}
          >
            Copy all
          </Button>
        </CardHeader>
        <dl className="space-y-3">
          <FieldRow label="Root">
            <Copyable value={urls.root} label="root URL" mono={false} />
          </FieldRow>
          <FieldRow label="Files (WebDAV)">
            <Copyable value={urls.files} label="files URL" mono={false} />
          </FieldRow>
          <FieldRow label="CalDAV">
            <Copyable value={urls.caldav} label="CalDAV URL" mono={false} />
          </FieldRow>
          <FieldRow label="CardDAV">
            <Copyable value={urls.carddav} label="CardDAV URL" mono={false} />
          </FieldRow>
          <FieldRow label="API base">
            <Copyable value={urls.api} label="API base URL" mono={false} />
          </FieldRow>
        </dl>
      </Card>

      <Card>
        <CardHeader>
          <div>
            <CardTitle>This host</CardTitle>
            <CardDescription>The opaque label your subject is reached under.</CardDescription>
          </div>
        </CardHeader>
        <dl className="space-y-3">
          <FieldRow label="Host label">
            <span className="font-mono text-sm text-zinc-200">{host_label}</span>
          </FieldRow>
          <FieldRow label="DAV host">
            <span className="text-sm text-zinc-200">{dav_host}</span>
          </FieldRow>
          <FieldRow label="Control plane">
            <span className="text-sm text-zinc-200">{control_plane_host}</span>
          </FieldRow>
        </dl>
        <details className="mt-4 border-t border-zinc-800/60 pt-3 text-xs text-zinc-500">
          <summary className="cursor-pointer text-zinc-400 hover:text-zinc-200">Internal identifiers</summary>
          <dl className="mt-2">
            <FieldRow label="Subject ID">
              <span className="font-mono text-sm text-zinc-200">{subject_id}</span>
            </FieldRow>
          </dl>
        </details>
      </Card>
    </div>
  );
}