import { useState } from "react";
import type { Talent, GameTalent } from "../types";
import TalentPicker from "./TalentPicker";
import styles from "./TalentList.module.css";

interface TalentListProps {
  talents: Talent[];
  onAdd: (data: {
    name: string;
    description: string;
    effect?: Record<string, unknown>;
    game_talent_id?: number | null;
  }) => void;
  onRemove: (talentId: number) => void;
  mode?: "view" | "edit";
}

export default function TalentList({
  talents,
  onAdd,
  onRemove,
  mode = "view",
}: TalentListProps) {
  const [showPicker, setShowPicker] = useState(false);
  const [showCustom, setShowCustom] = useState(false);
  const [name, setName] = useState("");
  const [description, setDescription] = useState("");

  function handleSelectPredefined(talent: GameTalent) {
    onAdd({
      name: talent.name,
      description: talent.description,
      effect: talent.effect,
      game_talent_id: talent.id,
    });
    setShowPicker(false);
  }

  function handleCustomSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (!name.trim()) return;
    onAdd({ name: name.trim(), description: description.trim() });
    setName("");
    setDescription("");
    setShowCustom(false);
  }

  return (
    <div className={styles.section}>
      <div className={styles.sectionHeader}>
        <span className={styles.sectionTitle}>Talents</span>
      </div>
      <div className={styles.list}>
        {talents.length === 0 && <p className={styles.empty}>No talents yet</p>}
        {talents.map((t) => (
          <div key={t.id} className={styles.item}>
            <div className={styles.itemInfo}>
              <div className={styles.itemName}>{t.name}</div>
              {t.description && (
                <div className={styles.itemDesc}>{t.description}</div>
              )}
            </div>
            {mode === "edit" && (
              <button
                className={styles.removeBtn}
                onClick={() => onRemove(t.id)}
                title="Remove"
              >
                ✕
              </button>
            )}
          </div>
        ))}
      </div>
      {mode === "edit" && (
        <div className={styles.addForm}>
          {showPicker && (
            <TalentPicker
              onSelect={handleSelectPredefined}
              onCustom={() => {
                setShowPicker(false);
                setShowCustom(true);
              }}
              onClose={() => setShowPicker(false)}
            />
          )}
          {showCustom ? (
            <form onSubmit={handleCustomSubmit}>
              <input
                className={styles.addInput}
                type="text"
                placeholder="Talent name..."
                value={name}
                onChange={(e) => setName(e.target.value)}
                autoFocus
              />
              <input
                className={styles.addInput}
                type="text"
                placeholder="Description (optional)..."
                value={description}
                onChange={(e) => setDescription(e.target.value)}
              />
              <div>
                <button className={styles.addBtn} type="submit">
                  + Add
                </button>
                <button
                  className={styles.addBtn}
                  type="button"
                  onClick={() => setShowCustom(false)}
                >
                  Cancel
                </button>
              </div>
            </form>
          ) : (
            !showPicker && (
              <button
                className={styles.addBtn}
                onClick={() => setShowPicker(true)}
              >
                + Add Talent
              </button>
            )
          )}
        </div>
      )}
    </div>
  );
}
