'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import { TournamentConfig, DEFAULT_CONFIG, BlindStructurePreset } from '@/lib/types';
import { formatBlinds, getTotalStructureMinutes } from '@/lib/blind-structure';
import { PITTS_POOL_TIER_TABLE, formatCurrency } from '@/lib/prize-pool';

export default function SetupPage() {
  const router = useRouter();
  const [config, setConfig] = useState<TournamentConfig>({ ...DEFAULT_CONFIG });
  const [presets, setPresets] = useState<BlindStructurePreset[]>([]);
  const [selectedStructureId, setSelectedStructureId] = useState('standard');
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    fetch('/api/settings')
      .then((r) => r.json())
      .then((settings) => {
        setConfig((c) => ({
          ...c,
          buyIn: settings.defaultBuyIn,
          startingChips: settings.defaultStartingChips,
          rebuyChips: settings.defaultRebuyChips,
          addonChips: settings.defaultAddonChips,
          rebuysEnabled: settings.defaultRebuysEnabled,
          addonsEnabled: settings.defaultAddonsEnabled,
          rebuyAmount: settings.defaultBuyIn,
          addonAmount: settings.defaultBuyIn,
        }));
        if (settings.defaultBlindStructureId) {
          setSelectedStructureId(settings.defaultBlindStructureId);
        }
      })
      .catch(() => {});

    fetch('/api/blinds')
      .then((r) => r.json())
      .then((data: BlindStructurePreset[]) => {
        if (Array.isArray(data)) setPresets(data);
      })
      .catch(() => {});
  }, []);

  const selectedPreset =
    presets.find((p) => p.id === selectedStructureId) || presets[0] || null;

  const update = (field: keyof TournamentConfig, value: unknown) => {
    setConfig((c) => ({ ...c, [field]: value }));
  };

  const handleCreate = async () => {
    setSaving(true);
    try {
      const preset = presets.find((p) => p.id === selectedStructureId);
      const payload: Partial<TournamentConfig> = {
        ...config,
        blindStructureId: selectedStructureId,
        blindStructureName: preset?.name,
        // Server also snapshots from id; sending levels is belt-and-suspenders
        blindStructure: preset?.levels,
      };
      const res = await fetch('/api/tournament', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ action: 'create', config: payload }),
      });
      if (res.ok) {
        router.push('/register');
      }
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className="max-w-4xl mx-auto px-4 py-8">
      <h1 className="text-3xl font-display font-bold text-poker-gold mb-6">Tournament Setup</h1>

      <div className="card mb-6 space-y-4">
        <h2 className="text-xl font-semibold text-poker-gold">Basic Info</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label className="block text-sm text-white/60 mb-1">Tournament Name</label>
            <input className="input-field" value={config.name} onChange={(e) => update('name', e.target.value)} />
          </div>
          <div>
            <label className="block text-sm text-white/60 mb-1">Type</label>
            <input className="input-field" value={config.type} onChange={(e) => update('type', e.target.value)} />
          </div>
          <div>
            <label className="block text-sm text-white/60 mb-1">Location</label>
            <input className="input-field" value={config.location ?? ''} onChange={(e) => update('location', e.target.value)} />
          </div>
          <div>
            <label className="block text-sm text-white/60 mb-1">Scheduled Start</label>
            <input className="input-field" type="datetime-local" value={config.scheduledStart ?? ''} onChange={(e) => update('scheduledStart', e.target.value)} />
          </div>
        </div>
      </div>

      <div className="card mb-6 space-y-4">
        <h2 className="text-xl font-semibold text-poker-gold">Buy-In & Chips</h2>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          <div>
            <label className="block text-sm text-white/60 mb-1">Buy-In ($)</label>
            <input className="input-field" type="number" value={config.buyIn} onChange={(e) => update('buyIn', Number(e.target.value))} />
          </div>
          <div>
            <label className="block text-sm text-white/60 mb-1">Starting Chips</label>
            <input className="input-field" type="number" value={config.startingChips} onChange={(e) => update('startingChips', Number(e.target.value))} />
          </div>
          <div>
            <label className="block text-sm text-white/60 mb-1">Rebuy Chips</label>
            <input className="input-field" type="number" value={config.rebuyChips} onChange={(e) => update('rebuyChips', Number(e.target.value))} />
          </div>
          <div>
            <label className="block text-sm text-white/60 mb-1">Addon Chips</label>
            <input className="input-field" type="number" value={config.addonChips} onChange={(e) => update('addonChips', Number(e.target.value))} />
          </div>
        </div>
      </div>

      <div className="card mb-6 space-y-4">
        <h2 className="text-xl font-semibold text-poker-gold">Rebuys & Addons</h2>
        <p className="text-sm text-white/50">Rebuys and addons can both be enabled independently.</p>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="space-y-3 p-4 bg-white/5 rounded-lg">
            <label className="flex items-center gap-3 cursor-pointer">
              <input
                type="checkbox"
                checked={config.rebuysEnabled}
                onChange={(e) => update('rebuysEnabled', e.target.checked)}
                className="w-5 h-5 accent-poker-gold"
              />
              <span className="font-semibold">Rebuys Enabled</span>
            </label>
            {config.rebuysEnabled && (
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block text-sm text-white/60 mb-1">Rebuy Amount ($)</label>
                  <input className="input-field" type="number" value={config.rebuyAmount} onChange={(e) => update('rebuyAmount', Number(e.target.value))} />
                </div>
                <div>
                  <label className="block text-sm text-white/60 mb-1">Max Rebuys</label>
                  <input className="input-field" type="number" value={config.maxRebuys} onChange={(e) => update('maxRebuys', Number(e.target.value))} />
                </div>
              </div>
            )}
          </div>
          <div className="space-y-3 p-4 bg-white/5 rounded-lg">
            <label className="flex items-center gap-3 cursor-pointer">
              <input
                type="checkbox"
                checked={config.addonsEnabled}
                onChange={(e) => update('addonsEnabled', e.target.checked)}
                className="w-5 h-5 accent-poker-gold"
              />
              <span className="font-semibold">Addons Enabled</span>
            </label>
            {config.addonsEnabled && (
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block text-sm text-white/60 mb-1">Addon Amount ($)</label>
                  <input className="input-field" type="number" value={config.addonAmount} onChange={(e) => update('addonAmount', Number(e.target.value))} />
                </div>
                <div>
                  <label className="block text-sm text-white/60 mb-1">Max Addons</label>
                  <input className="input-field" type="number" value={config.maxAddons} onChange={(e) => update('maxAddons', Number(e.target.value))} />
                </div>
              </div>
            )}
          </div>
        </div>
      </div>

      <div className="card mb-6 space-y-4">
        <h2 className="text-xl font-semibold text-poker-gold">Payout Structure</h2>

        <div className="space-y-2">
          <label className="flex items-start gap-3 p-3 rounded-lg bg-white/5 border border-white/10 cursor-pointer">
            <input
              type="radio"
              className="mt-1 accent-poker-gold"
              checked={(config.payoutMode || 'pitts_pool') === 'pitts_pool'}
              onChange={() => update('payoutMode', 'pitts_pool')}
            />
            <div>
              <div className="font-semibold">Pitts prize pool (recommended)</div>
              <p className="text-sm text-white/50 mt-0.5">
                Paid places scale with total prize pool (buy-ins + rebuys + addons, after house fee).
              </p>
            </div>
          </label>
          <label className="flex items-start gap-3 p-3 rounded-lg bg-white/5 border border-white/10 cursor-pointer">
            <input
              type="radio"
              className="mt-1 accent-poker-gold"
              checked={config.payoutMode === 'fixed'}
              onChange={() => update('payoutMode', 'fixed')}
            />
            <div>
              <div className="font-semibold">Fixed percentages</div>
              <p className="text-sm text-white/50 mt-0.5">
                Manual place % (old style).
              </p>
            </div>
          </label>
        </div>

        {(config.payoutMode || 'pitts_pool') === 'pitts_pool' ? (
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="text-white/50 border-b border-white/10">
                  <th className="py-2 text-left">Prize pool</th>
                  <th className="py-2 text-left">Paid places</th>
                </tr>
              </thead>
              <tbody>
                {PITTS_POOL_TIER_TABLE.map((row) => (
                  <tr key={row.places} className="border-b border-white/5">
                    <td className="py-1.5">{row.label}</td>
                    <td className="py-1.5 font-semibold text-poker-gold">{row.places}</td>
                  </tr>
                ))}
              </tbody>
            </table>
            <p className="text-xs text-white/40 mt-2">
              Example: {formatCurrency(1200)} pool → 5 places. Never pays more places than checked-in players.
            </p>
          </div>
        ) : (
          <div className="grid grid-cols-3 gap-4">
            {config.payoutStructure.map((tier, i) => (
              <div key={tier.place}>
                <label className="block text-sm text-white/60 mb-1">Place {tier.place} (%)</label>
                <input
                  className="input-field"
                  type="number"
                  value={tier.percentage}
                  onChange={(e) => {
                    const ps = [...config.payoutStructure];
                    ps[i] = { ...ps[i], percentage: Number(e.target.value) };
                    update('payoutStructure', ps);
                  }}
                />
              </div>
            ))}
          </div>
        )}

        <div>
          <label className="block text-sm text-white/60 mb-1">House Fee (%)</label>
          <input className="input-field w-32" type="number" value={config.houseFeePercent} onChange={(e) => update('houseFeePercent', Number(e.target.value))} />
        </div>
      </div>

      <div className="card mb-6 space-y-4">
        <div className="flex flex-wrap items-center justify-between gap-3">
          <h2 className="text-xl font-semibold text-poker-gold">Blind Structure</h2>
          <Link href="/blinds" className="text-sm text-poker-gold hover:underline">
            Manage structures →
          </Link>
        </div>
        <div>
          <label className="block text-sm text-white/60 mb-1">Choose set</label>
          <select
            className="input-field"
            value={selectedStructureId}
            onChange={(e) => setSelectedStructureId(e.target.value)}
          >
            {presets.length === 0 && <option value="standard">Standard (loading…)</option>}
            {presets.map((p) => (
              <option key={p.id} value={p.id}>
                {p.name}
                {p.description ? ` — ${p.description}` : ''}
              </option>
            ))}
          </select>
        </div>
        {selectedPreset && (
          <>
            <p className="text-sm text-white/50">
              {selectedPreset.description || selectedPreset.name}
              {' · '}
              {selectedPreset.levels.length} rows
              {' · '}≈{getTotalStructureMinutes(selectedPreset.levels)} min (
              {(getTotalStructureMinutes(selectedPreset.levels) / 60).toFixed(1)} hrs)
            </p>
            <div className="max-h-48 overflow-y-auto">
              <table className="w-full text-sm">
                <thead>
                  <tr className="text-white/50 border-b border-white/10">
                    <th className="py-2 text-left">Level</th>
                    <th className="py-2 text-left">Blinds</th>
                    <th className="py-2 text-left">Duration</th>
                  </tr>
                </thead>
                <tbody>
                  {selectedPreset.levels.map((l, i) => (
                    <tr key={i} className="border-b border-white/5">
                      <td className="py-1.5">
                        {l.isAnnouncement ? '📣' : l.isBreak ? '—' : l.level}
                      </td>
                      <td className="py-1.5">
                        {l.isAnnouncement
                          ? l.announcementText || 'Announcement'
                          : l.isBreak
                            ? l.breakLabel
                            : formatBlinds(l)}
                      </td>
                      <td className="py-1.5">
                        {l.isAnnouncement
                          ? l.durationMinutes > 0
                            ? `${l.durationMinutes} min hold`
                            : '~5s hold'
                          : `${l.durationMinutes} min`}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </>
        )}
      </div>

      <button onClick={handleCreate} disabled={saving} className="btn-primary w-full py-3 text-lg">
        {saving ? 'Creating...' : 'Create Tournament & Go to Registration →'}
      </button>
    </div>
  );
}