/**
 * `SkillEditor` — a fullscreen overlay for creating or editing skills (L12).
 * Rendered on top of the rest of the UI (`fixed inset-0`).
 *
 * Provides:
 * - Name field and scope selector (create-mode only; scope is fixed in edit-mode)
 * - Two tabs: "Edit" (textarea) and "Preview" (react-markdown)
 * - Save (create/update) and Cancel/Close buttons
 *
 * Pure presentation: all mutations are delegated to the callbacks supplied by
 * the parent (`SkillsPanel`). Styled with `@/shared`; no inline styles.
 */

import { useState } from "react";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";

import type { Skill, SkillScope } from "@/domain";
import { Button, Input, cn } from "@/shared";

export interface SkillEditorProps {
  /**
   * When set, the editor is in edit-mode for the given skill; otherwise it is in
   * create-mode (all fields start empty).
   */
  skill?: Skill | null;
  /** Called when the user submits the form. */
  onSave: (name: string, content: string, scope: SkillScope) => Promise<void>;
  /** Called when the user cancels / closes the overlay. */
  onClose: () => void;
  /** Whether a save operation is in flight. */
  busy?: boolean;
}

type EditorTab = "edit" | "preview";

export function SkillEditor({
  skill,
  onSave,
  onClose,
  busy = false,
}: SkillEditorProps) {
  const [name, setName] = useState(skill?.name ?? "");
  const [content, setContent] = useState(skill?.contentMd ?? "");
  const [scope, setScope] = useState<SkillScope>(skill?.scope ?? "project");
  const [tab, setTab] = useState<EditorTab>("edit");

  const editing = skill != null;
  const canSave = name.trim().length > 0 && content.trim().length > 0 && !busy;

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (!canSave) return;
    await onSave(name.trim(), content, scope);
  }

  return (
    <div
      className="fixed inset-0 z-50 flex flex-col bg-canvas"
      role="dialog"
      aria-modal="true"
      aria-label="skill editor"
    >
      {/* ── Header bar ── */}
      <div className="flex shrink-0 items-center justify-between border-b border-border bg-surface px-4 py-3">
        <h2 className="text-sm font-semibold text-content">
          {editing ? `Edit skill — ${skill.name}` : "New skill"}
        </h2>
        <Button
          type="button"
          variant="ghost"
          aria-label="close skill editor"
          onClick={onClose}
          disabled={busy}
        >
          ✕
        </Button>
      </div>

      {/* ── Form body ── */}
      <form
        onSubmit={(e) => void handleSubmit(e)}
        className="flex flex-1 flex-col gap-0 overflow-hidden"
      >
        {/* ── Meta fields ── */}
        <div className="flex shrink-0 flex-wrap items-end gap-3 border-b border-border px-4 py-3">
          <div className="flex min-w-0 flex-1 flex-col gap-1">
            <label htmlFor="se-name" className="text-xs font-medium text-muted">
              Name
            </label>
            <Input
              id="se-name"
              aria-label="skill name"
              placeholder="My skill"
              value={name}
              onChange={(e) => setName(e.target.value)}
              disabled={busy}
              className="min-w-48"
            />
          </div>

          <div className="flex min-w-0 flex-col gap-1">
            <label htmlFor="se-scope" className="text-xs font-medium text-muted">
              Scope
            </label>
            <select
              id="se-scope"
              aria-label="skill scope"
              value={scope}
              onChange={(e) => setScope(e.target.value as SkillScope)}
              disabled={busy || editing}
              className={cn(
                "h-9 w-full rounded-md bg-raised px-3 text-sm text-content",
                "border border-border outline-none transition-colors",
                "focus:border-primary disabled:cursor-not-allowed disabled:opacity-50",
              )}
            >
              <option value="project">Project</option>
              <option value="global">Global</option>
            </select>
          </div>
        </div>

        {/* ── Tab strip ── */}
        <div className="flex shrink-0 items-center gap-0 border-b border-border px-4">
          {(["edit", "preview"] as EditorTab[]).map((t) => (
            <button
              key={t}
              type="button"
              role="tab"
              aria-label={t === "edit" ? "Edit" : "Preview"}
              aria-selected={tab === t}
              onClick={() => setTab(t)}
              className={cn(
                "px-4 py-2 text-sm font-medium capitalize transition-colors",
                tab === t
                  ? "border-b-2 border-primary text-content"
                  : "text-muted hover:text-content",
              )}
            >
              {t === "edit" ? "Edit" : "Preview"}
            </button>
          ))}
        </div>

        {/* ── Edit / Preview pane ── */}
        <div className="flex flex-1 flex-col overflow-hidden px-4 py-3">
          {tab === "edit" ? (
            <textarea
              aria-label="skill content"
              value={content}
              onChange={(e) => setContent(e.target.value)}
              disabled={busy}
              className={cn(
                "flex-1 w-full rounded-md bg-raised px-3 py-2 text-sm text-content font-mono",
                "border border-border outline-none transition-colors resize-none",
                "focus:border-primary placeholder:text-faint",
                "disabled:cursor-not-allowed disabled:opacity-50",
              )}
              placeholder="# Skill workflow&#10;&#10;..."
            />
          ) : (
            <div
              className={cn(
                "flex-1 overflow-auto rounded-md border border-border bg-raised px-6 py-4",
                "prose prose-sm prose-invert max-w-none",
                "[&_h1]:text-content [&_h2]:text-content [&_h3]:text-content",
                "[&_p]:text-content/90 [&_li]:text-content/90",
                "[&_code]:bg-canvas [&_code]:text-primary [&_code]:rounded [&_code]:px-1",
                "[&_pre]:bg-canvas [&_pre]:border [&_pre]:border-border [&_pre]:rounded-md",
                "[&_a]:text-primary [&_a:hover]:underline",
                "[&_blockquote]:border-l-2 [&_blockquote]:border-primary [&_blockquote]:text-muted",
                "[&_hr]:border-border",
              )}
            >
              {content.trim() ? (
                <ReactMarkdown remarkPlugins={[remarkGfm]}>
                  {content}
                </ReactMarkdown>
              ) : (
                <p className="text-sm text-muted italic">
                  Nothing to preview yet.
                </p>
              )}
            </div>
          )}
        </div>

        {/* ── Footer ── */}
        <div className="flex shrink-0 items-center justify-end gap-2 border-t border-border px-4 py-3">
          <Button type="button" variant="ghost" onClick={onClose} disabled={busy}>
            Cancel
          </Button>
          <Button
            type="submit"
            variant="primary"
            aria-label="Save skill"
            disabled={!canSave}
            loading={busy}
          >
            Save
          </Button>
        </div>
      </form>
    </div>
  );
}
