import React from "react";
import spellsFile from "../../data/spells.yml";
import { Spell, CheckMap } from "../types";
import { DISCIPLINES } from "../constants";
import { autoResize } from "../utils";

interface SpellsPageProps {
  isActive: boolean;
  spells: Spell[];
  setSpells: React.Dispatch<React.SetStateAction<Spell[]>>;
  disciplines: CheckMap;
  toggleDisc: (d: string) => void;
  ritualsNotes: string;
  onRitualsNotesChange: (v: string) => void;
  spellPickerOpen: boolean;
  setSpellPickerOpen: React.Dispatch<React.SetStateAction<boolean>>;
}

export default function SpellsPage({
  isActive,
  spells,
  setSpells,
  disciplines,
  toggleDisc,
  ritualsNotes,
  onRitualsNotesChange,
  spellPickerOpen,
  setSpellPickerOpen,
}: SpellsPageProps) {
  return (
    <div className={`page${isActive ? " active" : ""}`} id="page-spells">
      <div className="section" style={{ marginBottom: 20 }}>
        <div className="section-title">
          <span className="icon">✦</span> Arcana &amp; Spells
        </div>
        <table className="spells-table">
          <thead>
            <tr>
              <th className="spell-name-col">Name / Notes</th>
              <th className="spell-class-col">Class</th>
              <th className="spell-mp-col">MP Cost</th>
              <th className="spell-targets-col">Targets</th>
              <th className="spell-dur-col">Duration</th>
              <th className="spell-del-col"></th>
            </tr>
          </thead>
          <tbody>
            {spells.map((s, i) => (
              <React.Fragment key={i}>
                <tr className="spell-inputs-row">
                  <td className="spell-name-col">
                    <input
                      type="text"
                      placeholder="Spell / Arcana name…"
                      value={s.name || ""}
                      onChange={(e) =>
                        setSpells((prev) =>
                          prev.map((sp, j) => (j === i ? { ...sp, name: e.target.value } : sp))
                        )
                      }
                    />
                  </td>
                  <td className="spell-class-col">
                    <input
                      type="text"
                      placeholder="Class…"
                      value={s.spellClass || ""}
                      onChange={(e) =>
                        setSpells((prev) =>
                          prev.map((sp, j) =>
                            j === i ? { ...sp, spellClass: e.target.value } : sp
                          )
                        )
                      }
                    />
                  </td>
                  <td className="spell-mp-col">
                    <input
                      type="text"
                      placeholder="MP cost…"
                      value={s.mp || ""}
                      onChange={(e) =>
                        setSpells((prev) =>
                          prev.map((sp, j) => (j === i ? { ...sp, mp: e.target.value } : sp))
                        )
                      }
                    />
                  </td>
                  <td className="spell-targets-col">
                    <input
                      type="text"
                      placeholder="Target(s)…"
                      value={s.targets || ""}
                      onChange={(e) =>
                        setSpells((prev) =>
                          prev.map((sp, j) =>
                            j === i ? { ...sp, targets: e.target.value } : sp
                          )
                        )
                      }
                    />
                  </td>
                  <td className="spell-dur-col">
                    <input
                      type="text"
                      placeholder="Duration…"
                      value={s.duration || ""}
                      onChange={(e) =>
                        setSpells((prev) =>
                          prev.map((sp, j) =>
                            j === i ? { ...sp, duration: e.target.value } : sp
                          )
                        )
                      }
                    />
                  </td>
                  <td className="spell-del-col">
                    <button
                      type="button"
                      className="spell-del-btn"
                      onClick={() => setSpells((prev) => prev.filter((_, j) => j !== i))}
                    >
                      ✕
                    </button>
                  </td>
                </tr>
                <tr className="spell-notes-row">
                  <td colSpan={6}>
                    <textarea
                      placeholder="Notes / effect description…"
                      value={s.notes || ""}
                      ref={(el) => {
                        if (el) autoResize(el);
                      }}
                      onInput={(e) => autoResize(e.currentTarget)}
                      onChange={(e) =>
                        setSpells((prev) =>
                          prev.map((sp, j) =>
                            j === i ? { ...sp, notes: e.target.value } : sp
                          )
                        )
                      }
                    />
                  </td>
                </tr>
              </React.Fragment>
            ))}
          </tbody>
        </table>
        <div style={{ display: "flex", gap: 8, marginTop: 10 }}>
          <button
            type="button"
            className="add-btn"
            onClick={() =>
              setSpells((prev) => [
                ...prev,
                { name: "", spellClass: "", notes: "", mp: "", targets: "", duration: "" },
              ])
            }
          >
            + Add Spell / Arcana
          </button>
          <button type="button" className="add-btn" onClick={() => setSpellPickerOpen(true)}>
            + Add Template Spell
          </button>
        </div>

        {spellPickerOpen && (
          <div className="spell-picker-overlay" onClick={() => setSpellPickerOpen(false)}>
            <div className="spell-picker-modal" onClick={(e) => e.stopPropagation()}>
              <div className="spell-picker-header">
                <span>Choose a spell</span>
                <button
                  type="button"
                  className="spell-picker-close"
                  onClick={() => setSpellPickerOpen(false)}
                >
                  ✕
                </button>
              </div>
              <ul className="spell-picker-list">
                {(spellsFile as SpellsFile).spells.map((t, i) => (
                  <li
                    key={i}
                    className="spell-picker-item"
                    onClick={() => {
                      setSpells((prev) => [
                        ...prev,
                        {
                          name: t.name,
                          spellClass: t.class,
                          notes: t.description,
                          mp: t.cost,
                          targets: t.targets,
                          duration: t.duration,
                        },
                      ]);
                      setSpellPickerOpen(false);
                    }}
                  >
                    <span className="spell-picker-name">{t.name}</span>
                    <span className="spell-picker-class">{t.class}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        )}
      </div>

      <div className="section">
        <div className="section-title">
          <span className="icon">⊕</span> Rituals
        </div>
        <div className="disciplines-row">
          {DISCIPLINES.map((d) => (
            <div
              key={d}
              className={`disc-item${disciplines[d] ? " checked" : ""}`}
              onClick={() => toggleDisc(d)}
            >
              <div className="disc-box">{disciplines[d] ? "✓" : ""}</div>
              <span>{d}</span>
            </div>
          ))}
        </div>
        <textarea
          value={ritualsNotes}
          onChange={(e) => onRitualsNotesChange(e.target.value)}
          placeholder="Record ritual details, components, and notes here…"
          style={{ minHeight: 120 }}
        />
      </div>
    </div>
  );
}
