"use client";

import { LoaderCircle, Sparkles, X } from "lucide-react";
import type { SourceDraftMode } from "./types";

export function ComposerSourceDraft({
  sourceDraftMode,
  draftTitle,
  onDraftTitleChange,
  draftText,
  onDraftTextChange,
  onSaveDraftSource,
  onClose,
  isSavingDraft,
}: {
  sourceDraftMode: Exclude<SourceDraftMode, null>;
  draftTitle: string;
  onDraftTitleChange: (value: string) => void;
  draftText: string;
  onDraftTextChange: (value: string) => void;
  onSaveDraftSource: () => void;
  onClose: () => void;
  isSavingDraft: boolean;
}) {
  const label =
    sourceDraftMode === "link"
      ? "Paste link source"
      : sourceDraftMode === "syllabus"
        ? "Paste syllabus"
        : "Add text source";
  const titlePlaceholder =
    sourceDraftMode === "link" ? "Source title" : sourceDraftMode === "syllabus" ? "Syllabus title" : "Notes title";
  const bodyPlaceholder =
    sourceDraftMode === "link"
      ? "Paste a public study link..."
      : sourceDraftMode === "syllabus"
        ? "Paste exam syllabus, chapter list, or teacher blueprint..."
        : "Paste syllabus, chapter notes, or teacher instructions...";

  return (
    <div className="mb-3 rounded-2xl border border-white/[0.09] bg-black/24 p-3">
      <div className="mb-2 flex items-center justify-between gap-3">
        <p className="text-xs font-semibold uppercase tracking-[0.14em] text-white/42">{label}</p>
        <button
          type="button"
          onClick={onClose}
          aria-label="Close source editor"
          className="grid size-7 place-items-center rounded-full text-white/42 transition hover:bg-white/[0.06] hover:text-white"
        >
          <X className="size-3.5" />
        </button>
      </div>
      <input
        value={draftTitle}
        onChange={(event) => onDraftTitleChange(event.target.value)}
        placeholder={titlePlaceholder}
        className="mb-2 h-10 w-full rounded-xl border border-white/[0.08] bg-white/[0.035] px-3 text-sm text-white outline-none placeholder:text-white/30 focus:border-white/22"
      />
      <textarea
        value={draftText}
        onChange={(event) => onDraftTextChange(event.target.value)}
        placeholder={bodyPlaceholder}
        rows={3}
        className="min-h-[5.5rem] w-full resize-none rounded-xl border border-white/[0.08] bg-white/[0.035] px-3 py-2 text-sm leading-6 text-white outline-none placeholder:text-white/30 focus:border-white/22"
      />
      <div className="mt-2 flex items-center justify-between gap-3">
        <p className="text-[11px] leading-4 text-white/34">Saved through the real source endpoint.</p>
        <button
          type="button"
          onClick={onSaveDraftSource}
          disabled={isSavingDraft || !draftText.trim()}
          className="inline-flex min-h-9 items-center gap-2 rounded-xl bg-white px-3 text-xs font-bold text-black transition hover:bg-white/90 disabled:cursor-not-allowed disabled:opacity-45"
        >
          {isSavingDraft ? <LoaderCircle className="size-3.5 animate-spin" /> : <Sparkles className="size-3.5" />}
          Save source
        </button>
      </div>
    </div>
  );
}