import React, { DragEvent, useEffect, useMemo, useRef, useState } from "react";
import { createRoot } from "react-dom/client";
import {
  Download,
  ExternalLink,
  FileText,
  Image as ImageIcon,
  Layers,
  LayoutTemplate,
  Loader2,
  Palette,
  Paperclip,
  Pencil,
  Save,
  Upload,
  WandSparkles,
  X
} from "lucide-react";
import "./styles.css";

type Mode = "template-build" | "deck-build" | "template-edit" | "deck-edit";

type DeckResult = {
  id: string;
  title: string;
  slides: number;
  specUrl: string;
  pptxUrl: string;
  source?: {
    title?: string;
    type?: string;
    sourceName?: string;
  };
};

type DesignTemplate = {
  id: string;
  name: string;
  description: string;
  sourceName?: string;
  colors: string[];
  updatedAt: string;
  locked?: boolean;
};

const initialContent = `# Customer Discovery Notes

Paste notes, transcript excerpts, or brief content here.

- Confirm the top decisions.
- Build an executive narrative.
- Render a PPTX for review.`;

const starterTemplate: DesignTemplate = {
  id: "incorta",
  name: "Incorta Starter",
  description:
    "White executive deck, orange brand accent, restrained blue secondary accents, Aptos typography, compact business density, fixed title/body/two-column/roadmap layouts.",
  colors: ["#ffffff", "#f05a28", "#1e6bff", "#172033", "#596579"],
  updatedAt: "2026-06-09T00:00:00.000Z",
  locked: true
};

const modeTabs: Array<{ id: Mode; label: string; icon: React.ElementType }> = [
  { id: "template-build", label: "Build Template", icon: LayoutTemplate },
  { id: "deck-build", label: "Build Slide / Deck", icon: Layers },
  { id: "template-edit", label: "Edit Template", icon: Palette },
  { id: "deck-edit", label: "Edit Slide / Deck", icon: Pencil }
];

function App() {
  const [activeMode, setActiveMode] = useState<Mode>("template-build");
  const [templates, setTemplates] = useState<DesignTemplate[]>([starterTemplate]);
  const [selectedTemplateId, setSelectedTemplateId] = useState(starterTemplate.id);

  const [content, setContent] = useState(initialContent);
  const [instructions, setInstructions] = useState("Create a concise executive deck.");
  const [file, setFile] = useState<File | null>(null);
  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
  const [dragging, setDragging] = useState(false);

  const [templateName, setTemplateName] = useState("New design standard");
  const [templateDescription, setTemplateDescription] = useState(
    "Executive presentation system with clear hierarchy, reusable slide sections, consistent spacing, and restrained visual emphasis."
  );
  const [templateFile, setTemplateFile] = useState<File | null>(null);
  const [templatePreviewUrl, setTemplatePreviewUrl] = useState<string | null>(null);
  const [templateDragging, setTemplateDragging] = useState(false);
  const [editTemplateId, setEditTemplateId] = useState(starterTemplate.id);
  const [editTemplateName, setEditTemplateName] = useState(starterTemplate.name);
  const [editTemplateDescription, setEditTemplateDescription] = useState(starterTemplate.description);

  const [result, setResult] = useState<DeckResult | null>(null);
  const [notice, setNotice] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const fileInputRef = useRef<HTMLInputElement>(null);
  const templateInputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    try {
      const stored = window.localStorage.getItem("slideFactory.designTemplates.v1");
      if (!stored) return;
      const parsed = JSON.parse(stored) as DesignTemplate[];
      const customTemplates = parsed.filter((template) => template.id !== starterTemplate.id);
      setTemplates([starterTemplate, ...customTemplates]);
    } catch {
      setTemplates([starterTemplate]);
    }
  }, []);

  useEffect(() => {
    const customTemplates = templates.filter((template) => !template.locked);
    window.localStorage.setItem("slideFactory.designTemplates.v1", JSON.stringify(customTemplates));
  }, [templates]);

  const selectedTemplate = useMemo(
    () => templates.find((template) => template.id === selectedTemplateId) || starterTemplate,
    [selectedTemplateId, templates]
  );

  const editableTemplate = useMemo(
    () => templates.find((template) => template.id === editTemplateId) || starterTemplate,
    [editTemplateId, templates]
  );

  const activeTemplatePreview = useMemo<DesignTemplate>(() => {
    if (activeMode === "template-build") {
      return {
        id: "draft-template",
        name: templateName.trim() || "Untitled design standard",
        description: templateDescription.trim(),
        sourceName: templateFile?.name,
        colors: starterTemplate.colors,
        updatedAt: new Date().toISOString()
      };
    }

    if (activeMode === "template-edit") {
      return {
        ...editableTemplate,
        name: editTemplateName.trim() || editableTemplate.name,
        description: editTemplateDescription.trim()
      };
    }

    return selectedTemplate;
  }, [
    activeMode,
    editableTemplate,
    editTemplateDescription,
    editTemplateName,
    selectedTemplate,
    templateDescription,
    templateFile,
    templateName
  ]);

  const sourceLabel = useMemo(() => {
    if (file) return `${file.name} · ${formatBytes(file.size)}`;
    const chars = content.trim().length;
    return chars ? `${chars.toLocaleString()} characters pasted` : "No source selected";
  }, [content, file]);

  const templateSourceLabel = useMemo(() => {
    if (templateFile) return `${templateFile.name} · ${formatBytes(templateFile.size)}`;
    return "No design source selected";
  }, [templateFile]);

  function setSourceFile(nextFile: File | null) {
    if (previewUrl) URL.revokeObjectURL(previewUrl);
    setFile(nextFile);
    setResult(null);
    setError(null);
    if (nextFile?.type.startsWith("image/")) {
      setPreviewUrl(URL.createObjectURL(nextFile));
    } else {
      setPreviewUrl(null);
    }
  }

  function setTemplateSourceFile(nextFile: File | null) {
    if (templatePreviewUrl) URL.revokeObjectURL(templatePreviewUrl);
    setTemplateFile(nextFile);
    setNotice(null);
    setError(null);
    if (nextFile?.type.startsWith("image/")) {
      setTemplatePreviewUrl(URL.createObjectURL(nextFile));
    } else {
      setTemplatePreviewUrl(null);
    }
  }

  function onSourceDrop(event: DragEvent<HTMLLabelElement>) {
    event.preventDefault();
    setDragging(false);
    const dropped = event.dataTransfer.files?.[0];
    if (dropped) setSourceFile(dropped);
  }

  function onTemplateDrop(event: DragEvent<HTMLLabelElement>) {
    event.preventDefault();
    setTemplateDragging(false);
    const dropped = event.dataTransfer.files?.[0];
    if (dropped) setTemplateSourceFile(dropped);
  }

  async function onPaste(event: React.ClipboardEvent<HTMLTextAreaElement>) {
    const image = Array.from(event.clipboardData.files).find((item) => item.type.startsWith("image/"));
    if (image) {
      event.preventDefault();
      setSourceFile(image);
    }
  }

  function saveTemplate() {
    const name = templateName.trim() || "Untitled design standard";
    const template: DesignTemplate = {
      id: `template-${Date.now()}`,
      name,
      description: templateDescription.trim(),
      sourceName: templateFile?.name,
      colors: starterTemplate.colors,
      updatedAt: new Date().toISOString()
    };
    setTemplates((current) => [starterTemplate, template, ...current.filter((item) => item.id !== starterTemplate.id)]);
    setSelectedTemplateId(template.id);
    setEditTemplateId(template.id);
    setEditTemplateName(template.name);
    setEditTemplateDescription(template.description);
    setNotice(`${template.name} saved`);
  }

  function loadEditableTemplate(templateId: string) {
    const template = templates.find((item) => item.id === templateId) || starterTemplate;
    setEditTemplateId(template.id);
    setEditTemplateName(template.name);
    setEditTemplateDescription(template.description);
    setNotice(null);
    setError(null);
  }

  function updateTemplate() {
    if (editableTemplate.locked) {
      const copy: DesignTemplate = {
        ...editableTemplate,
        id: `template-${Date.now()}`,
        name: `${editTemplateName.trim() || editableTemplate.name} Copy`,
        description: editTemplateDescription.trim(),
        locked: false,
        updatedAt: new Date().toISOString()
      };
      setTemplates((current) => [starterTemplate, copy, ...current.filter((item) => item.id !== starterTemplate.id)]);
      setSelectedTemplateId(copy.id);
      setEditTemplateId(copy.id);
      setEditTemplateName(copy.name);
      setNotice(`${copy.name} saved`);
      return;
    }

    setTemplates((current) =>
      current.map((template) =>
        template.id === editTemplateId
          ? {
              ...template,
              name: editTemplateName.trim() || template.name,
              description: editTemplateDescription.trim(),
              updatedAt: new Date().toISOString()
            }
          : template
      )
    );
    setNotice(`${editTemplateName.trim() || editableTemplate.name} updated`);
  }

  function removeEditableTemplate() {
    if (editableTemplate.locked) return;
    setTemplates((current) => current.filter((template) => template.id !== editableTemplate.id));
    setSelectedTemplateId(starterTemplate.id);
    loadEditableTemplate(starterTemplate.id);
    setNotice(`${editableTemplate.name} removed`);
  }

  async function createDeck() {
    setBusy(true);
    setError(null);
    setNotice(null);
    setResult(null);
    try {
      const response = file ? await createDeckFromFile(file) : await createDeckFromText();
      const json = await response.json();
      if (!response.ok) throw new Error(json.error || "Deck generation failed");
      setResult(json);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Unknown error");
    } finally {
      setBusy(false);
    }
  }

  function designAwareInstructions() {
    return [
      instructions,
      "",
      `Selected design template: ${selectedTemplate.name}.`,
      selectedTemplate.description
    ]
      .filter(Boolean)
      .join("\n");
  }

  function createDeckFromFile(sourceFile: File) {
    const formData = new FormData();
    formData.set("source", sourceFile);
    formData.set("style", "incorta");
    formData.set("audience", "executives");
    formData.set("instructions", designAwareInstructions());
    return fetch("/api/decks/from-source", {
      method: "POST",
      body: formData
    });
  }

  function createDeckFromText() {
    return fetch("/api/decks", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        style: "incorta",
        instructions: designAwareInstructions(),
        input: { type: "markdown", content }
      })
    });
  }

  const title = modeTabs.find((mode) => mode.id === activeMode)?.label || "Slide Factory";

  return (
    <main className="app-shell">
      <section className="workspace">
        <header className="topbar">
          <div>
            <p className="eyebrow">Slide Factory</p>
            <h1>{title}</h1>
          </div>
          <div className="topbar-actions">
            <a className="secondary-action" href="/google-slides-workflow.html">
              <ExternalLink size={16} />
              Google Slides workflow
            </a>
            {activeMode === "template-build" && (
              <button className="primary-action" onClick={saveTemplate}>
                <Save size={18} />
                Save template
              </button>
            )}
            {activeMode === "deck-build" && (
              <button className="primary-action" onClick={createDeck} disabled={busy}>
                {busy ? <Loader2 className="spin" size={18} /> : <WandSparkles size={18} />}
                {busy ? "Building" : "Build deck"}
              </button>
            )}
            {activeMode === "template-edit" && (
              <button className="primary-action" onClick={updateTemplate}>
                <Save size={18} />
                Save edits
              </button>
            )}
            {activeMode === "deck-edit" && (
              <button className="primary-action" onClick={createDeck} disabled={busy}>
                {busy ? <Loader2 className="spin" size={18} /> : <WandSparkles size={18} />}
                {busy ? "Rebuilding" : "Build revision"}
              </button>
            )}
          </div>
        </header>

        <nav className="mode-tabs" aria-label="Slide Factory modes">
          {modeTabs.map((mode) => {
            const Icon = mode.icon;
            return (
              <button
                key={mode.id}
                type="button"
                className={`mode-tab ${activeMode === mode.id ? "is-active" : ""}`}
                onClick={() => setActiveMode(mode.id)}
              >
                <Icon size={16} />
                {mode.label}
              </button>
            );
          })}
        </nav>

        <div className="main-grid">
          <section className="source-pane">
            {activeMode === "template-build" && (
              <TemplateBuildPane
                dragging={templateDragging}
                inputRef={templateInputRef}
                name={templateName}
                previewUrl={templatePreviewUrl}
                sourceLabel={templateSourceLabel}
                description={templateDescription}
                onDrop={onTemplateDrop}
                onDragging={setTemplateDragging}
                onFile={setTemplateSourceFile}
                onName={setTemplateName}
                onDescription={setTemplateDescription}
                onSave={saveTemplate}
              />
            )}

            {activeMode === "deck-build" && (
              <DeckBuildPane
                content={content}
                dragging={dragging}
                file={file}
                fileInputRef={fileInputRef}
                instructions={instructions}
                previewUrl={previewUrl}
                selectedTemplateId={selectedTemplateId}
                sourceLabel={sourceLabel}
                templates={templates}
                onContent={setContent}
                onDragging={setDragging}
                onDrop={onSourceDrop}
                onFile={setSourceFile}
                onInstructions={setInstructions}
                onPaste={onPaste}
                onTemplate={setSelectedTemplateId}
              />
            )}

            {activeMode === "template-edit" && (
              <TemplateEditPane
                description={editTemplateDescription}
                editableTemplate={editableTemplate}
                name={editTemplateName}
                templateId={editTemplateId}
                templates={templates}
                onDescription={setEditTemplateDescription}
                onName={setEditTemplateName}
                onRemove={removeEditableTemplate}
                onTemplate={loadEditableTemplate}
              />
            )}

            {activeMode === "deck-edit" && (
              <DeckEditPane
                content={content}
                dragging={dragging}
                file={file}
                fileInputRef={fileInputRef}
                instructions={instructions}
                previewUrl={previewUrl}
                selectedTemplateId={selectedTemplateId}
                sourceLabel={sourceLabel}
                templates={templates}
                onContent={setContent}
                onDragging={setDragging}
                onDrop={onSourceDrop}
                onFile={setSourceFile}
                onInstructions={setInstructions}
                onPaste={onPaste}
                onTemplate={setSelectedTemplateId}
              />
            )}
          </section>

          <OutputPanel
            activeMode={activeMode}
            error={error}
            notice={notice}
            result={result}
            template={activeTemplatePreview}
            templates={templates}
          />
        </div>
      </section>
    </main>
  );
}

function TemplateBuildPane(props: {
  dragging: boolean;
  inputRef: React.RefObject<HTMLInputElement>;
  name: string;
  previewUrl: string | null;
  sourceLabel: string;
  description: string;
  onDrop: (event: DragEvent<HTMLLabelElement>) => void;
  onDragging: (dragging: boolean) => void;
  onFile: (file: File | null) => void;
  onName: (value: string) => void;
  onDescription: (value: string) => void;
  onSave: () => void;
}) {
  return (
    <>
      <label
        className={`drop-zone ${props.dragging ? "is-dragging" : ""}`}
        onDragOver={(event) => {
          event.preventDefault();
          props.onDragging(true);
        }}
        onDragLeave={() => props.onDragging(false)}
        onDrop={props.onDrop}
      >
        <input
          ref={props.inputRef}
          type="file"
          accept=".ppt,.pptx,.pdf,image/*"
          onChange={(event) => props.onFile(event.target.files?.[0] || null)}
        />
        <Upload size={20} />
        <span>Drop design source</span>
        <button type="button" className="secondary-action" onClick={() => props.inputRef.current?.click()}>
          <Paperclip size={16} />
          Choose file
        </button>
      </label>

      <div className="source-status">
        <span>{props.sourceLabel}</span>
        {props.previewUrl && (
          <button type="button" className="icon-action" onClick={() => props.onFile(null)} aria-label="Clear design source">
            <X size={16} />
          </button>
        )}
      </div>

      {props.previewUrl && (
        <div className="image-preview">
          <img src={props.previewUrl} alt="" />
        </div>
      )}

      <label className="field">
        <span>Template name</span>
        <input value={props.name} onChange={(event) => props.onName(event.target.value)} />
      </label>

      <label className="field content compact">
        <span>Design description</span>
        <textarea value={props.description} onChange={(event) => props.onDescription(event.target.value)} />
      </label>

      <button type="button" className="secondary-action wide-action" onClick={props.onSave}>
        <Save size={16} />
        Save template
      </button>
    </>
  );
}

function DeckBuildPane(props: DeckPaneProps) {
  return (
    <>
      <TemplateSelect templates={props.templates} value={props.selectedTemplateId} onChange={props.onTemplate} />
      <SourceInput {...props} dropLabel="Drop source" textLabel="Paste source" />
    </>
  );
}

function DeckEditPane(props: DeckPaneProps) {
  return (
    <>
      <TemplateSelect templates={props.templates} value={props.selectedTemplateId} onChange={props.onTemplate} />
      <SourceInput {...props} dropLabel="Drop slide / deck" textLabel="Revision notes" />
    </>
  );
}

type DeckPaneProps = {
  content: string;
  dragging: boolean;
  file: File | null;
  fileInputRef: React.RefObject<HTMLInputElement>;
  instructions: string;
  previewUrl: string | null;
  selectedTemplateId: string;
  sourceLabel: string;
  templates: DesignTemplate[];
  onContent: (value: string) => void;
  onDragging: (dragging: boolean) => void;
  onDrop: (event: DragEvent<HTMLLabelElement>) => void;
  onFile: (file: File | null) => void;
  onInstructions: (value: string) => void;
  onPaste: (event: React.ClipboardEvent<HTMLTextAreaElement>) => void;
  onTemplate: (id: string) => void;
};

function TemplateSelect(props: { templates: DesignTemplate[]; value: string; onChange: (id: string) => void }) {
  const active = props.templates.find((template) => template.id === props.value) || starterTemplate;
  return (
    <div className="template-select">
      <label className="field">
        <span>Design template</span>
        <select value={props.value} onChange={(event) => props.onChange(event.target.value)}>
          {props.templates.map((template) => (
            <option key={template.id} value={template.id}>
              {template.name}
            </option>
          ))}
        </select>
      </label>
      <Swatches colors={active.colors} />
    </div>
  );
}

function SourceInput(props: DeckPaneProps & { dropLabel: string; textLabel: string }) {
  return (
    <>
      <label
        className={`drop-zone ${props.dragging ? "is-dragging" : ""}`}
        onDragOver={(event) => {
          event.preventDefault();
          props.onDragging(true);
        }}
        onDragLeave={() => props.onDragging(false)}
        onDrop={props.onDrop}
      >
        <input
          ref={props.fileInputRef}
          type="file"
          accept=".md,.markdown,.txt,.pdf,.ppt,.pptx,image/*"
          onChange={(event) => props.onFile(event.target.files?.[0] || null)}
        />
        <Upload size={20} />
        <span>{props.dropLabel}</span>
        <button type="button" className="secondary-action" onClick={() => props.fileInputRef.current?.click()}>
          <Paperclip size={16} />
          Choose file
        </button>
      </label>

      <div className="source-status">
        <span>{props.sourceLabel}</span>
        {props.file && (
          <button type="button" className="icon-action" onClick={() => props.onFile(null)} aria-label="Clear file">
            <X size={16} />
          </button>
        )}
      </div>

      {props.previewUrl && (
        <div className="image-preview">
          <img src={props.previewUrl} alt="" />
        </div>
      )}

      <label className="field">
        <span>Instructions</span>
        <input value={props.instructions} onChange={(event) => props.onInstructions(event.target.value)} />
      </label>

      <label className="field content">
        <span>{props.textLabel}</span>
        <textarea
          value={props.content}
          onPaste={props.onPaste}
          onChange={(event) => {
            props.onContent(event.target.value);
            if (props.file) props.onFile(null);
          }}
        />
      </label>
    </>
  );
}

function TemplateEditPane(props: {
  description: string;
  editableTemplate: DesignTemplate;
  name: string;
  templateId: string;
  templates: DesignTemplate[];
  onDescription: (value: string) => void;
  onName: (value: string) => void;
  onRemove: () => void;
  onTemplate: (id: string) => void;
}) {
  return (
    <>
      <div className="template-select">
        <label className="field">
          <span>Template</span>
          <select value={props.templateId} onChange={(event) => props.onTemplate(event.target.value)}>
            {props.templates.map((template) => (
              <option key={template.id} value={template.id}>
                {template.name}
              </option>
            ))}
          </select>
        </label>
        <Swatches colors={props.editableTemplate.colors} />
      </div>

      <label className="field">
        <span>Template name</span>
        <input value={props.name} onChange={(event) => props.onName(event.target.value)} />
      </label>

      <label className="field content compact">
        <span>Design description</span>
        <textarea value={props.description} onChange={(event) => props.onDescription(event.target.value)} />
      </label>

      <div className="button-row">
        <button type="button" className="secondary-action" onClick={props.onRemove} disabled={props.editableTemplate.locked}>
          <X size={16} />
          Remove
        </button>
      </div>
    </>
  );
}

function OutputPanel(props: {
  activeMode: Mode;
  error: string | null;
  notice: string | null;
  result: DeckResult | null;
  template: DesignTemplate;
  templates: DesignTemplate[];
}) {
  const templateMode = props.activeMode === "template-build" || props.activeMode === "template-edit";
  return (
    <aside className="result-panel">
      <div className="result-title">
        {templateMode ? <LayoutTemplate size={18} /> : <FileText size={18} />}
        <span>{templateMode ? "Template" : "Output"}</span>
      </div>

      {props.error && <p className="error">{props.error}</p>}
      {props.notice && <p className="notice">{props.notice}</p>}

      {templateMode ? (
        <div className="result">
          <strong>{props.template.name}</strong>
          <Swatches colors={props.template.colors} />
          {props.template.description && <p className="template-summary">{props.template.description}</p>}
          <span>{props.templates.length} templates</span>
          {props.template.sourceName && <span className="source-chip">{props.template.sourceName}</span>}
        </div>
      ) : (
        <>
          {!props.result && !props.error && <p className="muted">Ready for a source.</p>}
          {props.result && (
            <div className="result">
              <strong>{props.result.title}</strong>
              <span>{props.result.slides} slides</span>
              {props.result.source?.sourceName && <span className="source-chip">{props.result.source.sourceName}</span>}
              <a href={props.result.pptxUrl}>
                <Download size={16} />
                PPTX
              </a>
              <a href={props.result.specUrl}>DeckSpec JSON</a>
            </div>
          )}
        </>
      )}
    </aside>
  );
}

function Swatches(props: { colors: string[] }) {
  return (
    <div className="swatches" aria-label="Template colors">
      {props.colors.map((color) => (
        <span key={color} className="swatch" style={{ background: color }} />
      ))}
    </div>
  );
}

function formatBytes(value: number) {
  if (value < 1024) return `${value} B`;
  if (value < 1024 * 1024) return `${Math.round(value / 1024)} KB`;
  return `${(value / 1024 / 1024).toFixed(1)} MB`;
}

createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);