import { useState, useRef, useMemo } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { useUI, useAudio, useConfig } from "../../context/LauncherContext";
import { ArcService } from "../../services/ArcService";
import { ArcFile, ArcEntry, LocFile, LocLanguage } from "../../types/arc";
export const ArcEditorView: React.FC = () => {
  const { setActiveView } = useUI();
  const { playPressSound, playBackSound } = useAudio();
  const { animationsEnabled } = useConfig();
  const [arc, setArc] = useState<ArcFile | null>(null);
  const [loc, setLoc] = useState<LocFile | null>(null);
  const [activeTab, setActiveTab] = useState<"arc" | "loc">("arc");
  const [searchTerm, setSearchTerm] = useState("");
  const [selectedEntryIdx, setSelectedEntryIdx] = useState<number | null>(null);
  const [selectedLocLangIdx, setSelectedLocLangIdx] = useState<number>(0);
  const [notification, setNotification] = useState<{ message: string, type: "success" | "error" } | null>(null);
  const [isAddModalOpen, setIsAddModalOpen] = useState(false);
  const [isReplaceModalOpen, setIsReplaceModalOpen] = useState(false);
  const [isRenameModalOpen, setIsRenameModalOpen] = useState(false);
  const [isLocEditModalOpen, setIsLocEditModalOpen] = useState<{ langIdx: number, strIdx: number, isNew: boolean } | null>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const injectInputRef = useRef<HTMLInputElement>(null);
  const replaceInputRef = useRef<HTMLInputElement>(null);
  const filteredEntries = useMemo(() => {
    if (!arc) return [];
    return arc.entries.map((e, i) => ({ ...e, originalIdx: i }))
      .filter(e => e.filename.toLowerCase().includes(searchTerm.toLowerCase()));
  }, [arc, searchTerm]);

  const currentLocLang = useMemo(() => {
    if (!loc) return null;
    return loc.languages[selectedLocLangIdx] || null;
  }, [loc, selectedLocLangIdx]);

  const filteredLocStrings = useMemo(() => {
    if (!currentLocLang) return [];
    return currentLocLang.strings.map((s, i) => ({ ...s, originalIdx: i }))
      .filter(s => (s.key?.toLowerCase().includes(searchTerm.toLowerCase()) || s.value.toLowerCase().includes(searchTerm.toLowerCase())));
  }, [currentLocLang, searchTerm]);

  const showNotification = (message: string, type: "success" | "error" = "success") => {
    setNotification({ message, type });
    setTimeout(() => setNotification(null), 3000);
  };

  const handleFileLoad = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    playPressSound();
    const buffer = await file.arrayBuffer();
    try {
      const parsed = await ArcService.readARC(buffer);
      parsed.name = file.name;
      setArc(parsed);
      const locEntry = parsed.entries.find(entry => entry.filename.toLowerCase() === "languages.loc");
      if (locEntry) {
        try {
          const parsedLoc = ArcService.parseLOC(locEntry.data);
          setLoc(parsedLoc);
        } catch (err) {
          console.warn("Could not parse languages.loc", err);
          setLoc(null);
        }
      } else {
        setLoc(null);
      }
      setSelectedEntryIdx(null);
      showNotification(`Loaded ${file.name}`);
    } catch (err) {
      console.error("Failed to parse ARC", err);
      showNotification("Failed to parse ARC", "error");
    }
  };

  const handleSaveArc = () => {
    if (!arc) return;
    playPressSound();
    const buffer = ArcService.serializeARC(arc);
    const blob = new Blob([buffer]);
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = arc.name || "archive.arc";
    a.click();
    URL.revokeObjectURL(url);
    showNotification("ARC Saved Successfully");
  };

  const handleExtractEntry = (entry: ArcEntry) => {
    playPressSound();
    const blob = new Blob([entry.data as any]);
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = entry.filename.split("/").pop() || "asset";
    a.click();
    URL.revokeObjectURL(url);
    showNotification(`Extracted: ${entry.filename}`);
  };

  const handleDeleteEntry = (idx: number) => {
    if (!arc) return;
    playBackSound();
    const name = arc.entries[idx].filename;
    const newEntries = [...arc.entries];
    newEntries.splice(idx, 1);
    setArc({ ...arc, entries: newEntries });
    setSelectedEntryIdx(null);
    showNotification(`Deleted: ${name}`);
  };

  const handleSaveLocToArc = () => {
    if (!loc || !arc) return;
    playPressSound();
    const data = ArcService.serializeLOC(loc);
    const locIdx = arc.entries.findIndex(e => e.filename.toLowerCase() === "languages.loc");
    const newEntries = [...arc.entries];
    if (locIdx >= 0) {
      newEntries[locIdx] = { ...newEntries[locIdx], data, size: data.length };
      showNotification("languages.loc updated in archive");
    } else {
      newEntries.push({ filename: "languages.loc", ptr: 0, size: data.length, isCompressed: false, data });
      showNotification("languages.loc added to archive");
    }
    setArc({ ...arc, entries: newEntries });
  };

  const handleAddEntry = async (e: React.ChangeEvent<HTMLInputElement>) => {
    if (!arc) return;
    const file = e.target.files?.[0];
    if (!file) return;
    playPressSound();
    const buffer = await file.arrayBuffer();
    const data = new Uint8Array(buffer);
    const newEntry: ArcEntry = {
      filename: file.name,
      ptr: 0,
      size: data.length,
      isCompressed: false,
      data
    };
    setArc({ ...arc, entries: [...arc.entries, newEntry] });
    e.target.value = "";
    showNotification("Entry Added");
    setIsAddModalOpen(false);
  };

  const handleReplaceEntry = async (e: React.ChangeEvent<HTMLInputElement>) => {
    if (!arc || selectedEntryIdx === null) return;
    const file = e.target.files?.[0];
    if (!file) return;
    playPressSound();
    const buffer = await file.arrayBuffer();
    const data = new Uint8Array(buffer);
    const newEntries = [...arc.entries];
    newEntries[selectedEntryIdx] = { ...newEntries[selectedEntryIdx], data, size: data.length };
    setArc({ ...arc, entries: newEntries });
    e.target.value = "";
    showNotification("Entry Replaced");
    setIsReplaceModalOpen(false);
  };

  const handleRenameEntry = (newPath: string, isCompressed: boolean) => {
    if (!arc || selectedEntryIdx === null) return;
    playPressSound();
    const newEntries = [...arc.entries];
    newEntries[selectedEntryIdx] = { ...newEntries[selectedEntryIdx], filename: newPath, isCompressed };
    setArc({ ...arc, entries: newEntries });
    setIsRenameModalOpen(false);
    showNotification("Entry Renamed");
  };

  const handleLocStringEdit = (langIdx: number, strIdx: number, isNew: boolean, key: string, value: string) => {
    if (!loc) return;
    playPressSound();
    const newLoc = { ...loc };
    const lang = newLoc.languages[langIdx];
    if (isNew) {
      lang.strings.push(lang.isStatic ? { value } : { key, value });
    } else {
      if (!lang.isStatic) lang.strings[strIdx].key = key;
      lang.strings[strIdx].value = value;
    }
    setLoc(newLoc);
    setIsLocEditModalOpen(null);
    showNotification(isNew ? "String Added" : "String Updated");
  };

  const handleLocStringDelete = (langIdx: number, strIdx: number) => {
    if (!loc) return;
    playBackSound();
    const newLoc = { ...loc };
    newLoc.languages[langIdx].strings.splice(strIdx, 1);
    setLoc(newLoc);
    showNotification("String Deleted");
  };

  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.95 }}
      animate={{ opacity: 1, scale: 1 }}
      exit={{ opacity: 0, scale: 0.95 }}
      transition={{ duration: animationsEnabled ? 0.3 : 0 }}
      className="flex flex-col w-full h-[85vh] max-w-7xl relative"
    >
      <input type="file" ref={fileInputRef} onChange={handleFileLoad} className="hidden" accept=".arc" />
      <input type="file" ref={injectInputRef} onChange={handleAddEntry} className="hidden" />
      <input type="file" ref={replaceInputRef} onChange={handleReplaceEntry} className="hidden" />
      <div className="flex items-center justify-between mb-6 px-4">
        <div className="flex items-center gap-6">
          <h2 className="text-3xl text-white mc-text-shadow tracking-widest uppercase font-bold">ARC Editor</h2>
          {arc && <span className="text-white/40 mc-text-shadow italic">editing: <span className="text-[#FFFF55]">{arc.name}</span></span>}
        </div>
        <div className="flex gap-4">
          <button
            onClick={() => fileInputRef.current?.click()}
            className="px-6 py-2 text-white mc-text-shadow text-lg"
            style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: "100% 100%" }}
          >
            Open ARC
          </button>
          <button
            onClick={handleSaveArc}
            disabled={!arc}
            className={`px-6 py-2 text-white mc-text-shadow text-lg ${!arc ? "opacity-50 grayscale" : ""}`}
            style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: "100% 100%" }}
          >
            Save ARC
          </button>
        </div>
      </div>

      {!arc ? (
        <div className="flex-1 w-full flex flex-col items-center justify-center p-12"
          style={{ backgroundImage: "url('/images/frame_background.png')", backgroundSize: "100% 100%", imageRendering: "pixelated" }}>
          <img src="/images/tools/arc.png" className="w-32 h-32 mb-8 opacity-20 grayscale" style={{ imageRendering: "pixelated" }} />
          <h3 className="text-2xl text-white/40 mc-text-shadow italic">Open an ARC file to begin editing</h3>
        </div>
      ) : (
        <div className="flex-1 w-full flex flex-col overflow-hidden" style={{ backgroundImage: "url('/images/frame_background.png')", backgroundSize: "100% 100%", imageRendering: "pixelated" }}>
          <div className="flex gap-1 p-2 pt-4 border-b-2 border-[#373737]">
            <button
              onClick={() => { playPressSound(); setActiveTab("arc"); }}
              className={`flex items-center gap-3 px-6 py-2 transition-all mc-text-shadow ${activeTab === "arc" ? "text-[#FFFF55] opacity-100 scale-105" : "text-white opacity-40 hover:opacity-100"}`}
            >
              <img src="/images/tools/arc.png" className={`w-5 h-5 object-contain ${activeTab === "arc" ? "" : "grayscale opacity-50"}`} style={{ imageRendering: "pixelated" }} />
              <span className="text-lg">Archive</span>
            </button>
            <button
              onClick={() => { playPressSound(); setActiveTab("loc"); }}
              className={`flex items-center gap-3 px-6 py-2 transition-all mc-text-shadow ${activeTab === "loc" ? "text-[#FFFF55] opacity-100 scale-105" : "text-white opacity-40 hover:opacity-100"}`}
            >
              <img src="/images/tools/loc.png" className={`w-5 h-5 object-contain ${activeTab === "loc" ? "" : "grayscale opacity-50"}`} style={{ imageRendering: "pixelated" }} />
              <span className="text-lg">Languages (LOC)</span>
            </button>
          </div>

          <div className="flex-1 overflow-hidden flex flex-col">
            {activeTab === "arc" ? (
              <div className="flex-1 flex flex-col p-4 overflow-hidden">
                <div className="mb-4 flex gap-4">
                  <input
                    type="text"
                    placeholder="Search entries..."
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    className="flex-1 bg-black/40 border-2 border-[#373737] text-white px-4 py-2 outline-none focus:border-[#FFFF55] transition-colors"
                  />
                  <button
                    onClick={() => setIsAddModalOpen(true)}
                    className="px-6 py-2 text-white mc-text-shadow text-sm"
                    style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: "100% 100%" }}
                  >
                    Add Entry
                  </button>
                </div>
                <div className="flex-1 overflow-y-auto pr-2 custom-scrollbar">
                  <table className="w-full text-left border-collapse">
                    <thead className="sticky top-0 bg-[#252525] z-10">
                      <tr className="border-b-2 border-[#373737]">
                        <th className="p-3 text-white/40 uppercase text-xs tracking-widest font-bold">Filename</th>
                        <th className="p-3 text-white/40 uppercase text-xs tracking-widest font-bold text-right">Offset</th>
                        <th className="p-3 text-white/40 uppercase text-xs tracking-widest font-bold text-right">Size</th>
                        <th className="p-3 text-white/40 uppercase text-xs tracking-widest font-bold">Flags</th>
                        <th className="p-3 text-white/40 uppercase text-xs tracking-widest font-bold text-right">Actions</th>
                      </tr>
                    </thead>
                    <tbody>
                      {filteredEntries.map((entry) => (
                        <tr key={entry.originalIdx} className="border-b border-[#373737]/30 hover:bg-white/5 transition-colors group">
                          <td className="p-3 text-white truncate max-w-md font-medium">{entry.filename}</td>
                          <td className="p-3 text-white/60 text-right font-mono text-xs">0x{entry.ptr.toString(16).toUpperCase().padStart(8, '0')}</td>
                          <td className="p-3 text-white/60 text-right text-xs">{(entry.size / 1024).toFixed(1)} KB</td>
                          <td className="p-3">
                            {entry.isCompressed && (
                              <span className="bg-[#FFFF55]/10 text-[#FFFF55] border border-[#FFFF55]/20 px-2 py-0.5 text-[10px] uppercase font-bold">zlib</span>
                            )}
                          </td>
                          <td className="p-3 text-right flex justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
                            <button onClick={() => handleExtractEntry(entry)} className="p-1 hover:text-[#FFFF55] transition-colors"><img src="/images/Download_Icon.png" className="w-4 h-4 object-contain" style={{ imageRendering: "pixelated" }} /></button>
                            <button onClick={() => { setSelectedEntryIdx(entry.originalIdx); setIsReplaceModalOpen(true); }} className="px-2 py-1 text-[10px] bg-white/10 hover:bg-[#FFFF55]/20 hover:text-[#FFFF55] border border-white/20 transition-all uppercase">Replace</button>
                            <button onClick={() => { setSelectedEntryIdx(entry.originalIdx); setIsRenameModalOpen(true); }} className="px-2 py-1 text-[10px] bg-white/10 hover:bg-[#FFFF55]/20 hover:text-[#FFFF55] border border-white/20 transition-all uppercase">Rename</button>
                            <button onClick={() => handleDeleteEntry(entry.originalIdx)} className="p-1 hover:text-red-500 transition-colors opacity-60 hover:opacity-100">
                              <img src="/images/Trash_Bin_Icon.png" className="w-5 h-5 object-contain" style={{ imageRendering: "pixelated" }} />
                            </button>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>
            ) : (
              <div className="flex-1 flex flex-col p-4 overflow-hidden">
                {!loc ? (
                  <div className="flex-1 flex flex-col items-center justify-center p-12 text-center">
                    <h4 className="text-xl text-white/40 mc-text-shadow italic mb-4">No languages.loc found in archive</h4>
                    <button
                      onClick={() => {
                        setLoc({ version: 0, languages: [{ id: "en_US", version: 1, isStatic: false, langId: "en_US", strings: [] }] });
                        showNotification("Created new locale structure");
                      }}
                      className="px-6 py-2 text-white mc-text-shadow text-lg"
                      style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: "100% 100%" }}
                    >
                      Create languages.loc
                    </button>
                  </div>
                ) : (
                  <div className="flex-1 flex flex-col overflow-hidden">
                    <div className="mb-4 flex gap-4 items-center">
                      <select
                        value={selectedLocLangIdx}
                        onChange={(e) => setSelectedLocLangIdx(parseInt(e.target.value))}
                        className="bg-black/40 border-2 border-[#373737] text-white px-4 py-2 outline-none focus:border-[#FFFF55] transition-colors"
                      >
                        {loc.languages.map((lang, idx) => (
                          <option key={idx} value={idx}>{lang.id} {lang.isStatic ? "[Static]" : "[Keyed]"}</option>
                        ))}
                      </select>
                      <input
                        type="text"
                        placeholder="Search strings..."
                        value={searchTerm}
                        onChange={(e) => setSearchTerm(e.target.value)}
                        className="flex-1 bg-black/40 border-2 border-[#373737] text-white px-4 py-2 outline-none focus:border-[#FFFF55] transition-colors"
                      />
                      <button
                        onClick={() => setIsLocEditModalOpen({ langIdx: selectedLocLangIdx, strIdx: -1, isNew: true })}
                        className="px-6 py-2 text-white mc-text-shadow text-sm"
                        style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: "100% 100%" }}
                      >
                        Add String
                      </button>
                      <button
                        onClick={handleSaveLocToArc}
                        className="px-6 py-2 text-[#FFFF55] mc-text-shadow text-sm"
                        style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: "100% 100%" }}
                      >
                        Write to ARC
                      </button>
                    </div>
                    <div className="flex-1 overflow-y-auto pr-2 custom-scrollbar">
                      <table className="w-full text-left border-collapse">
                        <thead className="sticky top-0 bg-[#252525] z-10">
                          <tr className="border-b-2 border-[#373737]">
                            <th className="p-3 text-white/40 uppercase text-xs tracking-widest font-bold">Key / Index</th>
                            <th className="p-3 text-white/40 uppercase text-xs tracking-widest font-bold">Value</th>
                            <th className="p-3 text-white/40 uppercase text-xs tracking-widest font-bold text-right">Actions</th>
                          </tr>
                        </thead>
                        <tbody>
                          {filteredLocStrings.map((str) => (
                            <tr key={str.originalIdx} className="border-b border-[#373737]/30 hover:bg-white/5 transition-colors group">
                              <td className="p-3 text-[#FFFF55] font-mono text-sm max-w-[200px] truncate">
                                {currentLocLang?.isStatic ? str.originalIdx : str.key}
                              </td>
                              <td className="p-3 text-white text-sm whitespace-pre-wrap">{str.value}</td>
                              <td className="p-3 text-right opacity-0 group-hover:opacity-100 transition-opacity">
                                <div className="flex justify-end gap-2">
                                  <button
                                    onClick={() => setIsLocEditModalOpen({ langIdx: selectedLocLangIdx, strIdx: str.originalIdx, isNew: false })}
                                    className="px-2 py-1 text-[10px] bg-white/10 hover:bg-[#FFFF55]/20 hover:text-[#FFFF55] border border-white/20 transition-all uppercase"
                                  >
                                    Edit
                                  </button>
                                  <button onClick={() => handleLocStringDelete(selectedLocLangIdx, str.originalIdx)} className="p-1 hover:text-red-500 transition-colors opacity-60 hover:opacity-100">
                                    <img src="/images/Trash_Bin_Icon.png" className="w-4 h-4 object-contain" style={{ imageRendering: "pixelated" }} />
                                  </button>
                                </div>
                              </td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  </div>
                )}
              </div>
            )}
          </div>
        </div>
      )}
      <div className="flex justify-center mt-6 h-14">
        <button
          onClick={() => { playBackSound(); setActiveView("devtools"); }}
          className="w-72 h-full flex items-center justify-center transition-colors text-2xl mc-text-shadow outline-none border-none hover:text-[#FFFF55] text-white"
          style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: "100% 100%", imageRendering: "pixelated" }}
        >
          Back
        </button>
      </div>
      <AnimatePresence>
        {notification && (
          <motion.div
            initial={{ opacity: 0, y: -50, scale: 0.9 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: -50, scale: 0.9 }}
            className="fixed top-12 right-12 z-[100] p-6 flex flex-col items-center justify-center min-w-[240px]"
            style={{ backgroundImage: "url('/images/frame_background.png')", backgroundSize: "100% 100%", imageRendering: "pixelated" }}
          >
            <span className="text-white text-lg mc-text-shadow font-bold tracking-widest uppercase">
              {notification.message}
            </span>
          </motion.div>
        )}
      </AnimatePresence>
      {isAddModalOpen && (
        <div className="fixed inset-0 z-[110] flex items-center justify-center bg-black/60 backdrop-blur-sm">
          <div className="w-full max-w-md p-8" style={{ backgroundImage: "url('/images/frame_background.png')", backgroundSize: "100% 100%", imageRendering: "pixelated" }}>
            <h3 className="text-2xl text-[#FFFF55] mc-text-shadow mb-6">Add File to Archive</h3>
            <div className="flex flex-col gap-6">
              <button
                onClick={() => injectInputRef.current?.click()}
                className="w-full py-3 text-white mc-text-shadow"
                style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: "100% 100%" }}
              >
                Select Source File
              </button>
              <div className="flex justify-end gap-4 mt-4">
                <button onClick={() => setIsAddModalOpen(false)} className="px-6 py-2 text-white/60 hover:text-white transition-colors">Cancel</button>
              </div>
            </div>
          </div>
        </div>
      )}

      {isReplaceModalOpen && selectedEntryIdx !== null && (
        <div className="fixed inset-0 z-[110] flex items-center justify-center bg-black/60 backdrop-blur-sm">
          <div className="w-full max-w-md p-8" style={{ backgroundImage: "url('/images/frame_background.png')", backgroundSize: "100% 100%", imageRendering: "pixelated" }}>
            <h3 className="text-2xl text-[#FFFF55] mc-text-shadow mb-4">Replace File Data</h3>
            <p className="text-white/60 mb-6 truncate">{arc?.entries[selectedEntryIdx].filename}</p>
            <div className="flex flex-col gap-6">
              <button
                onClick={() => replaceInputRef.current?.click()}
                className="w-full py-3 text-white mc-text-shadow"
                style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: "100% 100%" }}
              >
                Select New File
              </button>
              <div className="flex justify-end gap-4 mt-4">
                <button onClick={() => setIsReplaceModalOpen(false)} className="px-6 py-2 text-white/60 hover:text-white transition-colors">Cancel</button>
              </div>
            </div>
          </div>
        </div>
      )}

      {isRenameModalOpen && selectedEntryIdx !== null && (
        <RenameModal
          initialName={arc?.entries[selectedEntryIdx].filename || ""}
          initialCompressed={arc?.entries[selectedEntryIdx].isCompressed || false}
          onClose={() => setIsRenameModalOpen(false)}
          onConfirm={handleRenameEntry}
        />
      )}
      {isLocEditModalOpen && (
        <LocEditModal
          data={isLocEditModalOpen}
          lang={loc?.languages[isLocEditModalOpen.langIdx]!}
          onClose={() => setIsLocEditModalOpen(null)}
          onConfirm={handleLocStringEdit}
        />
      )}
    </motion.div>
  );
}

function RenameModal({ initialName, initialCompressed, onClose, onConfirm }: { initialName: string, initialCompressed: boolean, onClose: () => void, onConfirm: (name: string, comp: boolean) => void }) {
  const [name, setName] = useState(initialName);
  const [comp, setComp] = useState(initialCompressed);
  return (
    <div className="fixed inset-0 z-[110] flex items-center justify-center bg-black/60 backdrop-blur-sm">
      <div className="w-full max-w-lg p-8" style={{ backgroundImage: "url('/images/frame_background.png')", backgroundSize: "100% 100%", imageRendering: "pixelated" }}>
        <h3 className="text-2xl text-[#FFFF55] mc-text-shadow mb-6 uppercase tracking-widest">Rename Entry</h3>
        <div className="flex flex-col gap-4">
          <div>
            <label className="text-white/40 text-xs uppercase mb-2 block">New Archive Path</label>
            <input
              type="text"
              value={name}
              onChange={(e) => setName(e.target.value)}
              className="w-full bg-black/40 border-2 border-[#373737] text-white px-4 py-3 outline-none focus:border-[#FFFF55] transition-colors"
            />
          </div>
          <label className="flex items-center gap-3 cursor-pointer group">
            <input type="checkbox" checked={comp} onChange={(e) => setComp(e.target.checked)} className="w-5 h-5 accent-[#FFFF55]" />
            <span className="text-white group-hover:text-[#FFFF55] transition-colors">Mark as compressed (zlib)</span>
          </label>
          <div className="flex justify-end gap-4 mt-6">
            <button onClick={onClose} className="px-6 py-2 text-white/60 hover:text-white transition-colors uppercase tracking-widest">Cancel</button>
            <button
              onClick={() => onConfirm(name, comp)}
              className="px-8 py-2 text-white mc-text-shadow"
              style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: "100% 100%" }}
            >
              Rename
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

function LocEditModal({ data, lang, onClose, onConfirm }: { data: { langIdx: number, strIdx: number, isNew: boolean }, lang: LocLanguage, onClose: () => void, onConfirm: (langIdx: number, strIdx: number, isNew: boolean, key: string, val: string) => void }) {
  const [key, setKey] = useState(!data.isNew ? (lang.strings[data.strIdx].key || "") : "");
  const [val, setVal] = useState(!data.isNew ? lang.strings[data.strIdx].value : "");
  return (
    <div className="fixed inset-0 z-[110] flex items-center justify-center bg-black/60 backdrop-blur-sm">
      <div className="w-full max-w-2xl p-8" style={{ backgroundImage: "url('/images/frame_background.png')", backgroundSize: "100% 100%", imageRendering: "pixelated" }}>
        <h3 className="text-2xl text-[#FFFF55] mc-text-shadow mb-6 uppercase tracking-widest">{data.isNew ? "Add" : "Edit"} String</h3>
        <div className="flex flex-col gap-4">
          {!lang.isStatic ? (
            <div>
              <label className="text-white/40 text-xs uppercase mb-2 block">String Key</label>
              <input
                type="text"
                value={key}
                onChange={(e) => setKey(e.target.value)}
                className="w-full bg-black/40 border-2 border-[#373737] text-white px-4 py-3 outline-none focus:border-[#FFFF55] transition-colors font-mono"
              />
            </div>
          ) : (
            <div className="text-white/40 italic mb-2">Static entry - Index: {data.isNew ? lang.strings.length : data.strIdx}</div>
          )}
          <div>
            <label className="text-white/40 text-xs uppercase mb-2 block">String Value</label>
            <textarea
              value={val}
              onChange={(e) => setVal(e.target.value)}
              rows={6}
              className="w-full bg-black/40 border-2 border-[#373737] text-white px-4 py-3 outline-none focus:border-[#FFFF55] transition-colors resize-none"
            />
          </div>
          <div className="flex justify-end gap-4 mt-6">
            <button onClick={onClose} className="px-6 py-2 text-white/60 hover:text-white transition-colors uppercase tracking-widest">Cancel</button>
            <button
              onClick={() => onConfirm(data.langIdx, data.strIdx, data.isNew, key, val)}
              className="px-8 py-2 text-white mc-text-shadow"
              style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: "100% 100%" }}
            >
              {data.isNew ? "Add" : "Save"}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}