import { Tabs } from "@cloudflare/kumo/components/tabs";
import { useId, useRef, useState } from "react";
import { useMarkdownPreview } from "~/hooks/use-markdown-preview";
import { useAttachmentUpload } from "~/hooks/use-attachment-upload";
import { Markdown } from "~/ui/Markdown";
import { FieldError } from "~/ui/Field";

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);
  const attachments = useAttachmentUpload(owner, repo);
  const textarea = useRef<HTMLTextAreaElement>(null);
  const fileInput = useRef<HTMLInputElement>(null);

  async function attach(files: FileList | File[]) {
    const snippets = await attachments.upload(files);
    if (snippets.length === 0) return;
    const at = textarea.current?.selectionStart ?? value.length;
    const insert = `${at > 0 && !value.slice(0, at).endsWith("\n") ? "\n" : ""}${snippets.join("\n")}\n`;
    onChange(value.slice(0, at) + insert + value.slice(at));
  }

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

  return (
    <div className="overflow-hidden rounded-md border border-kumo-line bg-kumo-base/70 focus-within:border-accent-500">
      <div className="flex items-center gap-2 border-b border-kumo-hairline bg-kumo-base px-2 py-1.5">
        <Tabs
          variant="segmented"
          size="sm"
          value={tab}
          onValueChange={(next) => select(next === "preview" ? "preview" : "write")}
          tabs={TABS.map((item) => ({ value: item.id, label: item.label }))}
        />
        <span className="ml-auto text-2xs text-kumo-inactive">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)}
            ref={textarea}
            onDragOver={(event) => attachments.enabled && event.preventDefault()}
            onDrop={(event) => {
              if (!attachments.enabled || event.dataTransfer.files.length === 0) return;
              event.preventDefault();
              void attach(event.dataTransfer.files);
            }}
            onPaste={(event) => {
              if (!attachments.enabled || event.clipboardData.files.length === 0) return;
              event.preventDefault();
              void attach(event.clipboardData.files);
            }}
            className="block w-full resize-y bg-kumo-canvas px-3 py-2.5 font-mono text-sm text-kumo-strong placeholder:text-kumo-placeholder focus:outline-none"
          />
          {attachments.enabled && (
            <div className="flex items-center gap-2 border-t border-kumo-hairline bg-kumo-canvas px-3 py-1.5 text-2xs text-kumo-subtle">
              <button type="button" className="hover:text-accent-400" onClick={() => fileInput.current?.click()}>
                Attach files
              </button>
              <span>by dragging, pasting or selecting them</span>
              <input
                ref={fileInput}
                type="file"
                multiple
                hidden
                onChange={(event) => {
                  if (event.target.files) void attach(event.target.files);
                  event.target.value = "";
                }}
              />
              {attachments.state.status === "uploading" && <span className="ml-auto">Uploading…</span>}
              {attachments.state.status === "error" && (
                <FieldError className="ml-auto text-2xs">{attachments.state.message}</FieldError>
              )}
            </div>
          )}
        </>
      ) : (
        <div className="min-h-32 bg-kumo-canvas px-4 py-3">
          {preview.state.status === "loading" && <p className="text-sm text-kumo-subtle">Rendering…</p>}
          {preview.state.status === "error" && <p className="text-sm text-kumo-danger">Preview failed</p>}
          {preview.state.status === "ready" &&
            (value.trim() ? (
              <Markdown html={preview.state.html} />
            ) : (
              <p className="text-sm text-kumo-subtle">Nothing to preview</p>
            ))}
        </div>
      )}
    </div>
  );
}