import { useId, useState } from "react";
import { useMarkdownPreview } from "~/hooks/use-markdown-preview";
import { Markdown } from "./ui/Primitives";
import { cn } from "~/utils/cn";

const TABS = [
  { id: "write", label: "Write" },
  { id: "preview", label: "Preview" },
] as const;

type Props = {
  value: string;
  onChange: (value: string) => void;
  owner?: string;
  repo?: string;
  placeholder?: string;
  rows?: number;
  label?: string;
};

export function MarkdownEditor({
  value,
  onChange,
  owner,
  repo,
  placeholder = "Leave a comment",
  rows = 6,
  label = "Comment",
}: Props) {
  const id = useId();
  const [tab, setTab] = useState<(typeof TABS)[number]["id"]>("write");
  const preview = useMarkdownPreview(owner ?? null, repo ?? null);

  function select(next: (typeof TABS)[number]["id"]) {
    setTab(next);
    if (next === "preview") preview.load(value);
  }

  return (
    <div className="overflow-hidden rounded-md border border-gray-700 bg-gray-900/70 focus-within:border-accent-500">
      <div role="tablist" aria-label={label} className="flex gap-1 border-b border-gray-800 bg-gray-900 px-2 pt-2">
        {TABS.map((item) => (
          <button
            key={item.id}
            type="button"
            role="tab"
            aria-selected={tab === item.id}
            onClick={() => select(item.id)}
            className={cn(
              "rounded-t-md border border-b-0 px-3 py-1.5 text-xs font-medium",
              tab === item.id
                ? "border-gray-700 bg-gray-950 text-gray-100"
                : "border-transparent text-gray-500 hover:text-gray-300",
            )}
          >
            {item.label}
          </button>
        ))}
        <span className="ml-auto self-center pb-1 text-[11px] text-gray-600">Markdown supported</span>
      </div>
      {tab === "write" ? (
        <>
          <label htmlFor={id} className="sr-only">
            {label}
          </label>
          <textarea
            id={id}
            value={value}
            rows={rows}
            placeholder={placeholder}
            onChange={(event) => onChange(event.target.value)}
            className="block w-full resize-y bg-gray-950 px-3 py-2.5 font-mono text-sm text-gray-100 placeholder:text-gray-600 focus:outline-none"
          />
        </>
      ) : (
        <div className="min-h-32 bg-gray-950 px-4 py-3">
          {preview.state.status === "loading" && <p className="text-sm text-gray-500">Rendering…</p>}
          {preview.state.status === "error" && <p className="text-sm text-red-400">Preview failed</p>}
          {preview.state.status === "ready" &&
            (value.trim() ? (
              <Markdown html={preview.state.html} />
            ) : (
              <p className="text-sm text-gray-500">Nothing to preview</p>
            ))}
        </div>
      )}
    </div>
  );
}