import type { NumberFormat, ProfileSettings } from "@elysium/types";
import { DEFAULT_PROFILE_SETTINGS } from "@elysium/types";
import { useEffect, useState } from "react";
import { updateProfile } from "../../api/client.js";
import { useGame } from "../../context/GameContext.js";

interface EditProfileModalProps {
  onClose: () => void;
}

interface StatToggle {
  key: keyof ProfileSettings;
  label: string;
  icon: string;
}

const CURRENT_RUN_TOGGLES: StatToggle[] = [
  { key: "showCurrentGold", label: "Gold Earned This Run", icon: "🪙" },
  { key: "showCurrentClicks", label: "Clicks This Run", icon: "👆" },
  { key: "showApotheosis", label: "Apotheosis Badge", icon: "✨" },
  { key: "showTranscendence", label: "Transcendence Badge", icon: "🌌" },
  { key: "showPrestige", label: "Prestige Level", icon: "⭐" },
  { key: "showBossesDefeated", label: "Bosses Defeated", icon: "💀" },
  { key: "showQuestsCompleted", label: "Quests Completed", icon: "📜" },
  { key: "showAdventurersRecruited", label: "Adventurers Recruited", icon: "⚔️" },
  { key: "showAchievementsUnlocked", label: "Achievements Unlocked", icon: "🏆" },
];

const ALL_TIME_TOGGLES: StatToggle[] = [
  { key: "showTotalGold", label: "Total Gold Earned", icon: "🪙" },
  { key: "showTotalClicks", label: "Total Clicks", icon: "👆" },
  { key: "showLifetimeBossesDefeated", label: "Bosses Defeated", icon: "💀" },
  { key: "showLifetimeQuestsCompleted", label: "Quests Completed", icon: "📜" },
  { key: "showLifetimeAdventurersRecruited", label: "Adventurers Recruited", icon: "⚔️" },
  { key: "showLifetimeAchievementsUnlocked", label: "Achievements Unlocked", icon: "🏆" },
  { key: "showGuildFounded", label: "Guild Founded Date", icon: "📅" },
];

export const EditProfileModal = ({ onClose }: EditProfileModalProps): React.JSX.Element => {
  const { state, numberFormat: currentNumberFormat, setNumberFormat } = useGame();
  const player = state?.player;

  const [characterName, setCharacterName] = useState(player?.characterName ?? "");
  const [bio, setBio] = useState("");
  const [settings, setSettings] = useState<ProfileSettings>({
    ...DEFAULT_PROFILE_SETTINGS,
    numberFormat: currentNumberFormat,
  });
  const [loadingProfile, setLoadingProfile] = useState(true);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [saved, setSaved] = useState(false);

  // Fetch current profile to auto-populate bio and settings
  useEffect(() => {
    if (!player?.discordId) return;
    fetch(`/api/profile/${player.discordId}`)
      .then(async (res) => {
        if (!res.ok) return;
        const data = (await res.json()) as {
          bio: string;
          profileSettings: ProfileSettings;
          characterName: string;
        };
        setBio(data.bio ?? "");
        setSettings({ ...DEFAULT_PROFILE_SETTINGS, ...data.profileSettings });
        setCharacterName(data.characterName ?? player.characterName ?? "");
      })
      .catch(() => {
        // Fall back to local state if fetch fails — not a blocking error
      })
      .finally(() => {
        setLoadingProfile(false);
      });
  }, [player?.discordId, player?.characterName]);

  const handleSave = async (): Promise<void> => {
    setSaving(true);
    setError(null);
    try {
      await updateProfile({ characterName, bio, profileSettings: settings });
      setNumberFormat(settings.numberFormat);
      setSaved(true);
      setTimeout(onClose, 900);
    } catch (err: unknown) {
      setError(err instanceof Error ? err.message : "Failed to save");
    } finally {
      setSaving(false);
    }
  };

  const toggleSetting = (key: keyof ProfileSettings): void => {
    setSettings((prev) => ({ ...prev, [key]: !prev[key] }));
  };

  return (
    <div className="modal-overlay" role="dialog" aria-modal="true">
      <div className="modal edit-profile-modal">
        <div className="modal-header">
          <h2>Edit Profile</h2>
          <button
            aria-label="Close"
            className="modal-close"
            onClick={onClose}
            type="button"
          >
            ✕
          </button>
        </div>

        {loadingProfile ? (
          <p className="edit-profile-loading">Loading your profile…</p>
        ) : (
          <div className="edit-profile-form">
            <label className="edit-profile-label" htmlFor="edit-char-name">
              Display Name
            </label>
            <input
              className="edit-profile-input"
              id="edit-char-name"
              maxLength={32}
              placeholder="Your character's name"
              type="text"
              value={characterName}
              onChange={(e) => { setCharacterName(e.target.value); }}
            />
            <span className="edit-profile-hint">{characterName.length} / 32</span>

            <label className="edit-profile-label" htmlFor="edit-bio">
              Bio
            </label>
            <textarea
              className="edit-profile-textarea"
              id="edit-bio"
              maxLength={200}
              placeholder="Tell the world about your guild… (optional)"
              rows={3}
              value={bio}
              onChange={(e) => { setBio(e.target.value); }}
            />
            <span className="edit-profile-hint">{bio.length} / 200</span>

            <div className="edit-profile-section">
              <p className="edit-profile-label">Visible Stats</p>
              <p className="edit-profile-sublabel">Choose which stats appear on your public profile.</p>

              <p className="edit-profile-stat-group-heading">Current Run</p>
              <div className="stat-toggles">
                {CURRENT_RUN_TOGGLES.map(({ key, label, icon }) => (
                  <button
                    key={key}
                    className={`stat-toggle-btn ${settings[key] ? "stat-toggle-on" : "stat-toggle-off"}`}
                    onClick={() => { toggleSetting(key); }}
                    type="button"
                  >
                    <span>{icon} {label}</span>
                    <span className="stat-toggle-indicator">
                      {settings[key] ? "✓ Shown" : "Hidden"}
                    </span>
                  </button>
                ))}
              </div>

              <p className="edit-profile-stat-group-heading">All Time</p>
              <div className="stat-toggles">
                {ALL_TIME_TOGGLES.map(({ key, label, icon }) => (
                  <button
                    key={key}
                    className={`stat-toggle-btn ${settings[key] ? "stat-toggle-on" : "stat-toggle-off"}`}
                    onClick={() => { toggleSetting(key); }}
                    type="button"
                  >
                    <span>{icon} {label}</span>
                    <span className="stat-toggle-indicator">
                      {settings[key] ? "✓ Shown" : "Hidden"}
                    </span>
                  </button>
                ))}
              </div>
            </div>

            <div className="edit-profile-section">
              <p className="edit-profile-label">Privacy</p>
              <p className="edit-profile-sublabel">Control your visibility on public leaderboards.</p>
              <button
                className={`stat-toggle-btn ${settings.showOnLeaderboards ? "stat-toggle-on" : "stat-toggle-off"}`}
                onClick={() => { toggleSetting("showOnLeaderboards"); }}
                type="button"
              >
                <span>🏆 Appear on Leaderboards</span>
                <span className="stat-toggle-indicator">
                  {settings.showOnLeaderboards ? "✓ Shown" : "Hidden"}
                </span>
              </button>
            </div>

            <div className="edit-profile-section">
              <p className="edit-profile-label">Number Format</p>
              <p className="edit-profile-sublabel">How large numbers appear across the game.</p>
              <div className="number-format-picker">
                {(
                  [
                    { value: "suffix",      label: "Suffix",      example: "1.23Qa" },
                    { value: "scientific",  label: "Scientific",  example: "1.23e15" },
                    { value: "engineering", label: "Engineering", example: "1.23E15" },
                  ] as { value: NumberFormat; label: string; example: string }[]
                ).map(({ value, label, example }) => (
                  <button
                    key={value}
                    className={`number-format-btn ${settings.numberFormat === value ? "number-format-active" : ""}`}
                    onClick={() => { setSettings((prev) => ({ ...prev, numberFormat: value })); }}
                    type="button"
                  >
                    <span className="number-format-label">{label}</span>
                    <span className="number-format-example">{example}</span>
                  </button>
                ))}
              </div>
            </div>

            {error && <p className="edit-profile-error">{error}</p>}

            <div className="edit-profile-actions">
              <button
                className="edit-profile-cancel"
                onClick={onClose}
                type="button"
              >
                Cancel
              </button>
              <button
                className="edit-profile-save"
                disabled={saving || !characterName.trim()}
                onClick={() => { void handleSave(); }}
                type="button"
              >
                {saved ? "✓ Saved!" : saving ? "Saving…" : "Save Profile"}
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};