atridotdad/src/components/ResumeSettingsModal.tsx

import { useState } from "preact/hooks";
import { useSignal } from "@preact/signals";
import { Settings } from "lucide-preact";

interface ResumeSettingsModalProps {
  className?: string;
}

export default function ResumeSettingsModal({
  className = "",
}: ResumeSettingsModalProps) {
  const [tomlContent, setTomlContent] = useState("");
  const [isGenerating, setIsGenerating] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [activeTab, setActiveTab] = useState<"upload" | "edit">("upload");
  const dragActive = useSignal(false);
  const modalOpen = useSignal(false);

  const openModal = () => {
    modalOpen.value = true;
  };

  const closeModal = () => {
    modalOpen.value = false;
    setError(null);
    setTomlContent("");
    setActiveTab("upload");
  };

  const handleFileUpload = (file: File) => {
    if (!file.name.endsWith(".toml")) {
      setError("Please upload a .toml file");
      return;
    }

    const reader = new FileReader();
    reader.onload = (e) => {
      const content = e.target?.result as string;
      setTomlContent(content);
      setError(null);
      setActiveTab("edit");
    };
    reader.onerror = () => {
      setError("Error reading file");
    };
    reader.readAsText(file);
  };

  const handleDrop = (e: DragEvent) => {
    e.preventDefault();
    dragActive.value = false;

    const files = e.dataTransfer?.files;
    if (files && files.length > 0) {
      handleFileUpload(files[0]);
    }
  };

  const handleDragOver = (e: DragEvent) => {
    e.preventDefault();
    dragActive.value = true;
  };

  const handleDragLeave = (e: DragEvent) => {
    e.preventDefault();
    dragActive.value = false;
  };

  const handleFileInput = (e: Event) => {
    const target = e.target as HTMLInputElement;
    const files = target.files;
    if (files && files.length > 0) {
      handleFileUpload(files[0]);
    }
  };

  const downloadTemplate = async () => {
    try {
      const response = await fetch("/api/resume/template");
      if (!response.ok) {
        throw new Error("Failed to download template");
      }

      const blob = await response.blob();
      const url = window.URL.createObjectURL(blob);

      const link = document.createElement("a");
      link.href = url;
      link.download = "resume-template.toml";
      document.body.appendChild(link);
      link.click();

      document.body.removeChild(link);
      window.URL.revokeObjectURL(url);
    } catch (err) {
      setError("Failed to download template");
    }
  };

  const generatePDF = async () => {
    if (!tomlContent.trim()) {
      setError("Please provide TOML content");
      return;
    }

    setIsGenerating(true);
    setError(null);

    try {
      const response = await fetch("/api/resume/pdf", {
        method: "POST",
        headers: {
          "Content-Type": "text/plain",
        },
        body: tomlContent,
      });

      if (!response.ok) {
        const errorText = await response.text();
        throw new Error(
          errorText || `Failed to generate PDF: ${response.status}`,
        );
      }

      const blob = await response.blob();
      const url = window.URL.createObjectURL(blob);

      const link = document.createElement("a");
      link.href = url;
      link.download = "resume.pdf";
      document.body.appendChild(link);
      link.click();

      document.body.removeChild(link);
      window.URL.revokeObjectURL(url);
    } catch (err) {
      console.error("Error generating PDF:", err);
      setError(err instanceof Error ? err.message : "Failed to generate PDF");
    } finally {
      setIsGenerating(false);
    }
  };

  const loadTemplate = async () => {
    try {
      const response = await fetch("/api/resume/template");
      if (!response.ok) {
        throw new Error("Failed to load template");
      }

      const template = await response.text();
      setTomlContent(template);
      setActiveTab("edit");
      setError(null);
    } catch (err) {
      setError("Failed to load template");
    }
  };

  return (
    <>
      {/* Floating Settings Button */}
      <button
        onClick={openModal}
        class={`fixed top-4 right-4 z-20 btn btn-circle btn-secondary hover:bg-primary shadow-lg opacity-100 translate-y-0 min-h-[44px] min-w-[44px] ${className}`}
        aria-label="Resume Settings"
      >
        <Settings class="text-lg" />
      </button>

      {/* Modal */}
      <div class={`modal ${modalOpen.value ? "modal-open" : ""}`}>
        <div class="modal-box w-11/12 max-w-5xl h-[90vh] flex flex-col">
          <div class="flex justify-between items-center mb-4">
            <h3 class="font-bold text-lg">Resume Generator</h3>
            <button
              onClick={closeModal}
              class="btn btn-sm btn-circle btn-ghost"
            >
              ✕
            </button>
          </div>

          <div class="flex-1 overflow-hidden flex flex-col">
            <p class="text-base-content/70 mb-4">
              Create a custom PDF resume from a TOML file. Download the
              template, edit it with your information, and generate your resume.
            </p>

            {/* Action Buttons */}
            <div class="flex flex-wrap gap-2 mb-6">
              <button onClick={downloadTemplate} class="btn btn-primary btn-sm">
                Download Template
              </button>
              <button onClick={loadTemplate} class="btn btn-secondary btn-sm">
                Load Template in Editor
              </button>
            </div>

            {/* Tabs */}
            <div class="flex justify-center mb-4">
              <div
                role="tablist"
                class="inline-flex bg-base-300 border border-base-content/20 rounded-full p-1"
              >
                <button
                  role="tab"
                  class={`px-4 py-2 rounded-full text-sm font-medium transition-all duration-200 ${
                    activeTab === "upload"
                      ? "bg-primary text-primary-content shadow-sm"
                      : "text-base-content/70 hover:text-base-content hover:bg-base-200"
                  }`}
                  onClick={() => setActiveTab("upload")}
                >
                  Upload File
                </button>
                <button
                  role="tab"
                  class={`px-4 py-2 rounded-full text-sm font-medium transition-all duration-200 ${
                    activeTab === "edit"
                      ? "bg-primary text-primary-content shadow-sm"
                      : "text-base-content/70 hover:text-base-content hover:bg-base-200"
                  }`}
                  onClick={() => setActiveTab("edit")}
                >
                  Edit TOML
                </button>
              </div>
            </div>

            {/* Content Area */}
            <div class="flex-1 overflow-hidden">
              {/* Upload Tab */}
              {activeTab === "upload" && (
                <div class="h-full">
                  <div
                    class={`border-2 border-dashed rounded-lg p-6 text-center transition-colors h-full flex items-center justify-center ${
                      dragActive.value
                        ? "border-primary bg-primary/10"
                        : "border-base-300 hover:border-primary/50"
                    }`}
                    onDrop={handleDrop}
                    onDragOver={handleDragOver}
                    onDragLeave={handleDragLeave}
                  >
                    <div class="space-y-4">
                      <div class="text-4xl">📄</div>
                      <div>
                        <p class="text-lg font-medium">
                          Drop your TOML file here
                        </p>
                        <p class="text-base-content/70">or click to browse</p>
                      </div>
                      <input
                        type="file"
                        accept=".toml"
                        onChange={handleFileInput}
                        class="file-input file-input-primary file-input-sm w-full max-w-xs"
                      />
                    </div>
                  </div>
                </div>
              )}

              {/* Edit Tab */}
              {activeTab === "edit" && (
                <div class="h-full flex flex-col space-y-2">
                  <div class="label">
                    <span class="label-text font-bold">TOML Content</span>
                    <span class="label-text-alt">
                      Edit your resume data below
                    </span>
                  </div>
                  <textarea
                    class="textarea textarea-bordered flex-1 font-mono text-xs resize-none w-full min-h-0"
                    placeholder="Paste your TOML content here or load the template..."
                    value={tomlContent}
                    onInput={(e) =>
                      setTomlContent((e.target as HTMLTextAreaElement).value)
                    }
                  />
                </div>
              )}
            </div>

            {/* Error Display */}
            {error && (
              <div class="alert alert-error mt-4">
                <span class="text-sm">{error}</span>
              </div>
            )}

            {/* Generate Button */}
            {tomlContent.trim() && (
              <div class="mt-4">
                <button
                  onClick={generatePDF}
                  disabled={isGenerating}
                  class="btn btn-primary btn-sm w-full"
                >
                  {isGenerating ? (
                    <>
                      <span class="loading loading-spinner loading-xs"></span>
                      Generating PDF...
                    </>
                  ) : (
                    "Generate Custom Resume PDF"
                  )}
                </button>
              </div>
            )}
          </div>
        </div>
        <div class="modal-backdrop backdrop-blur-sm" onClick={closeModal}></div>
      </div>
    </>
  );
}