"use client";
import * as React from "react";
import { Eye, Pencil } from "lucide-react";
import { invalidateProjects } from "@/components/app/store";
import { api } from "@/lib/client/api";
import { errorMessage } from "@/lib/client/humanize";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/input";
import { Segmented } from "@/components/ui/segmented";
import { toast } from "@/components/ui/toast";
import { Markdown } from "@/components/markdown/markdown";
import { useIsMobile } from "@/lib/client/hooks";
import type { PublicProject } from "@/lib/client/types";
import { cn } from "@/lib/utils";

type Mode = "write" | "preview";

/** Free-form markdown notes: write / preview (side by side on desktop), explicit save, word count. */
export function ProjectNotes({ project, onSaved }: { project: PublicProject; onSaved: () => Promise<unknown> | void }) {
  const isMobile = useIsMobile();
  const [notes, setNotes] = React.useState(project.notes ?? "");
  const [mode, setMode] = React.useState<Mode>("write");
  const [saving, setSaving] = React.useState(false);
  const last = React.useRef(project.updatedAt);
  React.useEffect(() => {
    if (last.current !== project.updatedAt) {
      last.current = project.updatedAt;
      setNotes(project.notes ?? "");
    }
  }, [project]);
  const dirty = notes !== (project.notes ?? "");
  const words = React.useMemo(() => (notes.trim() ? notes.trim().split(/\s+/).length : 0), [notes]);

  const save = async () => {
    setSaving(true);
    try {
      await api(`/api/projects/${project.id}`, { method: "PATCH", json: { notes: notes.trim() ? notes : null } });
      await Promise.all([onSaved(), invalidateProjects()]);
      toast.success("Notes saved");
    } catch (e) {
      toast.error("Could not save notes", errorMessage(e));
    } finally {
      setSaving(false);
    }
  };

  const editor = <Textarea value={notes} onChange={(e) => setNotes(e.target.value)} rows={14} maxLength={200_000} className="min-h-[50dvh] font-mono text-[13px] leading-5 sm:min-h-[420px]" placeholder={"# Goals\n- Ship the redesign by Q4\n\n## Links\n- Figma: …\n\nMarkdown is supported."} aria-label="Project notes" onKeyDown={(e) => { if ((e.metaKey || e.ctrlKey) && e.key === "s") { e.preventDefault(); if (dirty) void save(); } }} />;
  const preview = <div className={cn("min-h-[50dvh] rounded-xl border border-border bg-bg-elevated p-4 sm:min-h-[420px]", !notes.trim() && "flex items-center justify-center")}>{notes.trim() ? <Markdown content={notes} /> : <p className="text-[13px] text-fg-subtle">Nothing to preview yet.</p>}</div>;

  return (
    <div className="space-y-3">
      <div className="flex items-center gap-2">
        {isMobile ? <Segmented ariaLabel="Notes mode" value={mode} onChange={setMode} options={[{ value: "write", label: "Write", icon: <Pencil /> }, { value: "preview", label: "Preview", icon: <Eye /> }]} size="sm" /> : <span className="text-[13px] text-fg-muted">Markdown · live preview</span>}
        <span className="ml-auto text-[12px] text-fg-subtle tabular-nums">{words} word{words === 1 ? "" : "s"}</span>
      </div>
      {isMobile ? (mode === "write" ? editor : preview) : <div className="grid gap-4 lg:grid-cols-2">{editor}{preview}</div>}
      <div className={cn("sticky bottom-0 -mx-4 flex items-center gap-2 border-t border-border bg-bg/90 px-4 py-3 backdrop-blur sm:mx-0 sm:rounded-xl sm:border sm:px-3", !dirty && "pointer-events-none opacity-0")} aria-hidden={!dirty}>
        <span className="text-[13px] text-fg-muted">Unsaved changes</span>
        <div className="flex-1" />
        <Button variant="ghost" onClick={() => setNotes(project.notes ?? "")} disabled={saving}>
          Discard
        </Button>
        <Button loading={saving} onClick={save}>
          Save notes
        </Button>
      </div>
    </div>
  );
}