"use client";

import { useState, useEffect, useCallback } from "react";

import { clsx } from "@/lib/cx";

export type CiteKind = "bill" | "vote" | "member" | "award" | "page";

type CiteFormat = "apa" | "mla" | "chicago";

export interface CiteThisProps {

  kind?: CiteKind;

  title: string;

  permalink: string;

  sourceUrl: string;

  year?: number;

}

function longDate(d: Date): string {

  return d.toLocaleDateString("en-US", {

    year: "numeric",

    month: "long",

    day: "numeric",

  });

}

function mlaDate(d: Date): string {

  const day = d.getDate();

  const month = d.toLocaleDateString("en-US", { month: "long" });

  const year = d.getFullYear();

  return `${day} ${month} ${year}`;

}

function bareUrl(url: string): string {

  return url.replace(/^https?:\/\

}

function buildCitations(

  title: string,

  permalink: string,

  sourceUrl: string,

  year: number,

  today: Date

): Record<CiteFormat, string> {

  const accessed = longDate(today);

  const accessedMla = mlaDate(today);

  const apa = [

    `Docket. (${year}). ${title} [Data set]. U.S. Congress. Retrieved ${accessed}, from ${permalink}`,

    `Official government source: ${sourceUrl}`,

  ].join("\n");

  const mla = [

    `"${title}." Docket, United States Congress, ${year}, ${bareUrl(permalink)}. Accessed ${accessedMla}.`,

    `Official government source: ${sourceUrl}`,

  ].join("\n");

  const chicago = [

    `Docket. "${title}." United States Congress. ${year}. ${permalink} (accessed ${accessed}).`,

    `Official government source: ${sourceUrl}`,

  ].join("\n");

  return { apa, mla, chicago };

}

const FORMAT_LABELS: Record<CiteFormat, string> = {

  apa: "APA",

  mla: "MLA",

  chicago: "Chicago",

};

const FORMATS: CiteFormat[] = ["apa", "mla", "chicago"];

export function CiteThis({

  title,

  permalink,

  sourceUrl,

  year,

}: CiteThisProps) {

  const [mounted, setMounted] = useState(false);

  const [active, setActive] = useState<CiteFormat>("apa");

  const [copied, setCopied] = useState(false);

  useEffect(() => {

    setMounted(true);

  }, []);

  const today = mounted ? new Date() : null;

  const pubYear = year ?? (today?.getFullYear() ?? new Date().getFullYear());

  const citations = today

    ? buildCitations(title, permalink, sourceUrl, pubYear, today)

    : null;

  const handleCopy = useCallback(async () => {

    if (!citations) return;

    try {

      await navigator.clipboard.writeText(citations[active]);

      setCopied(true);

      setTimeout(() => setCopied(false), 2000);

    } catch {

    }

  }, [citations, active]);

  const handleTabKeyDown = useCallback(

    (e: React.KeyboardEvent<HTMLButtonElement>, idx: number) => {

      let next: number | null = null;

      if (e.key === "ArrowRight") next = (idx + 1) % FORMATS.length;

      if (e.key === "ArrowLeft") next = (idx - 1 + FORMATS.length) % FORMATS.length;

      if (next !== null) {

        e.preventDefault();

        setActive(FORMATS[next]);

        requestAnimationFrame(() => {

          (

            document.querySelector(

              `[data-cite-tab="${FORMATS[next!]}"]`

            ) as HTMLButtonElement | null

          )?.focus();

        });

      }

    },

    []

  );

  return (

    <section

      aria-label="Cite this record"

      className="rounded-[3px] border border-line bg-surface"

    >

      {}

      <div className="flex items-center justify-between border-b border-line px-4 py-3 sm:px-5">

        <p className="label text-ash">Cite this</p>

        {}

        <div

          role="tablist"

          aria-label="Citation format"

          className="flex gap-1"

        >

          {FORMATS.map((fmt, idx) => (

            <button

              key={fmt}

              role="tab"

              data-cite-tab={fmt}

              aria-selected={active === fmt}

              onClick={() => setActive(fmt)}

              onKeyDown={(e) => handleTabKeyDown(e, idx)}

              tabIndex={active === fmt ? 0 : -1}

              className={clsx(

                "focus-ring rounded-[2px] px-3 py-1.5 font-mono text-[12px] transition-colors",

                "min-h-[36px]",

                active === fmt

                  ? "bg-graphite text-paper"

                  : "text-ash hover:bg-graphite hover:text-paper"

              )}

            >

              {FORMAT_LABELS[fmt]}

            </button>

          ))}

        </div>

      </div>

      {}

      <div className="px-4 py-4 sm:px-5">

        {mounted && citations ? (

          <pre

            role="tabpanel"

            aria-label={`${FORMAT_LABELS[active]} citation`}

            className="whitespace-pre-wrap break-words font-mono text-[13px] leading-relaxed text-paper"

          >

            {citations[active]}

          </pre>

        ) : (

          <p className="font-mono text-[13px] text-ash-2">

            Loading citation…

          </p>

        )}

      </div>

      {}

      <div className="flex items-center justify-between border-t border-line px-4 py-3 sm:px-5">

        <p className="label text-ash-2">

          {}

          APA · MLA · Chicago - copy and paste into your document or citation manager.

        </p>

        <button

          type="button"

          onClick={handleCopy}

          disabled={!mounted}

          aria-label={`Copy ${FORMAT_LABELS[active]} citation to clipboard`}

          className={clsx(

            "focus-ring label inline-flex min-h-[44px] items-center gap-2 rounded-[3px] border border-line px-3 py-2",

            "transition-colors",

            copied

              ? "border-yea text-yea"

              : "text-ash hover:bg-graphite hover:text-paper"

          )}

          style={copied ? { borderColor: "var(--dk-yea)", color: "var(--dk-yea)" } : undefined}

        >

          {copied ? (

            <>

              <CopyIcon done />

              Copied

            </>

          ) : (

            <>

              <CopyIcon />

              Copy {FORMAT_LABELS[active]}

            </>

          )}

        </button>

      </div>

    </section>

  );

}

function CopyIcon({ done = false }: { done?: boolean }) {

  return done ? (

    <svg

      aria-hidden="true"

      width="14"

      height="14"

      viewBox="0 0 14 14"

      fill="none"

      stroke="currentColor"

      strokeWidth="2"

      strokeLinecap="round"

      strokeLinejoin="round"

    >

      <polyline points="2 7 6 11 12 3" />

    </svg>

  ) : (

    <svg

      aria-hidden="true"

      width="14"

      height="14"

      viewBox="0 0 14 14"

      fill="none"

      stroke="currentColor"

      strokeWidth="1.5"

      strokeLinecap="round"

      strokeLinejoin="round"

    >

      <rect x="4" y="4" width="8" height="8" rx="1" />

      <path d="M2 9V2h7" />

    </svg>

  );

}