'use client';

import { useCallback, useEffect, useState } from 'react';
import Link from 'next/link';
import { BlindLevel, BlindStructurePreset } from '@/lib/types';
import {
  emptyAnnouncement,
  emptyBreak,
  emptyLevel,
  formatBlinds,
  getTotalStructureMinutes,
} from '@/lib/blind-structure';

type Draft = {
  id?: string;
  name: string;
  description: string;
  levels: BlindLevel[];
  isBuiltin?: boolean;
};

export default function BlindsPage() {
  const [presets, setPresets] = useState<BlindStructurePreset[]>([]);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [message, setMessage] = useState<string | null>(null);
  const [draft, setDraft] = useState<Draft | null>(null);

  const load = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const res = await fetch('/api/blinds');
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || 'Failed to load');
      setPresets(data);
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Failed to load');
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    load();
  }, [load]);

  const startNew = () => {
    setMessage(null);
    setDraft({
      name: "Ross' Custom",
      description: '',
      levels: [
        emptyLevel(1),
        emptyLevel(2),
        { ...emptyLevel(3), smallBlind: 75, bigBlind: 150 },
        emptyBreak(),
      ],
    });
  };

  const editPreset = (p: BlindStructurePreset) => {
    setMessage(null);
    setDraft({
      id: p.id,
      name: p.name,
      description: p.description || '',
      levels: p.levels.map((l) => ({ ...l })),
      isBuiltin: p.isBuiltin,
    });
  };

  const duplicatePreset = async (id: string) => {
    setError(null);
    const res = await fetch('/api/blinds', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ action: 'duplicate', id }),
    });
    const data = await res.json();
    if (!res.ok) {
      setError(data.error || 'Duplicate failed');
      return;
    }
    await load();
    editPreset(data);
    setMessage(`Duplicated as “${data.name}” — edit and save.`);
  };

  const deletePreset = async (id: string, name: string) => {
    if (!confirm(`Delete blind structure “${name}”?`)) return;
    setError(null);
    const res = await fetch('/api/blinds', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ action: 'delete', id }),
    });
    const data = await res.json();
    if (!res.ok) {
      setError(data.error || 'Delete failed');
      return;
    }
    if (draft?.id === id) setDraft(null);
    setMessage(`Deleted “${name}”`);
    await load();
  };

  const updateLevel = (index: number, patch: Partial<BlindLevel>) => {
    if (!draft) return;
    const levels = draft.levels.map((l, i) => (i === index ? { ...l, ...patch } : l));
    setDraft({ ...draft, levels });
  };

  const addLevel = () => {
    if (!draft) return;
    const n = draft.levels.filter((l) => !l.isBreak).length + 1;
    setDraft({ ...draft, levels: [...draft.levels, emptyLevel(n)] });
  };

  const addBreak = () => {
    if (!draft) return;
    setDraft({ ...draft, levels: [...draft.levels, emptyBreak()] });
  };

  const addAnnouncement = () => {
    if (!draft) return;
    setDraft({ ...draft, levels: [...draft.levels, emptyAnnouncement()] });
  };

  const removeLevel = (index: number) => {
    if (!draft || draft.levels.length <= 1) return;
    setDraft({ ...draft, levels: draft.levels.filter((_, i) => i !== index) });
  };

  const moveLevel = (index: number, dir: -1 | 1) => {
    if (!draft) return;
    const j = index + dir;
    if (j < 0 || j >= draft.levels.length) return;
    const levels = [...draft.levels];
    [levels[index], levels[j]] = [levels[j], levels[index]];
    setDraft({ ...draft, levels });
  };

  const saveDraft = async () => {
    if (!draft) return;
    setSaving(true);
    setError(null);
    setMessage(null);
    try {
      const payload = draft.id
        ? {
            action: 'update',
            id: draft.id,
            name: draft.name,
            description: draft.description,
            levels: draft.levels,
          }
        : {
            action: 'create',
            name: draft.name,
            description: draft.description,
            levels: draft.levels,
          };
      const res = await fetch('/api/blinds', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || 'Save failed');
      setMessage(`Saved “${data.name}”`);
      setDraft({
        id: data.id,
        name: data.name,
        description: data.description || '',
        levels: data.levels,
        isBuiltin: data.isBuiltin,
      });
      await load();
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Save failed');
    } finally {
      setSaving(false);
    }
  };

  const totalMin = draft ? getTotalStructureMinutes(draft.levels) : 0;

  return (
    <div className="max-w-6xl mx-auto px-4 py-8">
      <div className="flex flex-wrap items-center justify-between gap-4 mb-6">
        <div>
          <h1 className="text-3xl font-display font-bold text-poker-gold">Blind Structures</h1>
          <p className="text-white/60 mt-1">
            Create named sets (Turbo, Hyper, Ross&apos; Custom…) then pick one in Tournament Setup.
          </p>
        </div>
        <div className="flex gap-2">
          <Link href="/setup" className="btn-secondary">
            Tournament Setup →
          </Link>
          <button type="button" onClick={startNew} className="btn-primary">
            + New structure
          </button>
        </div>
      </div>

      {error && (
        <div className="mb-4 p-3 rounded-lg bg-red-500/20 border border-red-500/40 text-red-200">
          {error}
        </div>
      )}
      {message && (
        <div className="mb-4 p-3 rounded-lg bg-green-500/15 border border-green-500/30 text-green-200">
          {message}
        </div>
      )}

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="card lg:col-span-1 space-y-3">
          <h2 className="text-lg font-semibold text-poker-gold">Saved sets</h2>
          {loading ? (
            <p className="text-white/50 text-sm">Loading…</p>
          ) : (
            <ul className="space-y-2">
              {presets.map((p) => (
                <li
                  key={p.id}
                  className={`p-3 rounded-lg border ${
                    draft?.id === p.id
                      ? 'border-poker-gold/50 bg-poker-gold/10'
                      : 'border-white/10 bg-white/5'
                  }`}
                >
                  <div className="font-semibold">{p.name}</div>
                  {p.description && (
                    <div className="text-xs text-white/50 mt-0.5">{p.description}</div>
                  )}
                  <div className="text-xs text-white/40 mt-1">
                    {p.levels.length} rows · ~{getTotalStructureMinutes(p.levels)} min
                    {p.isBuiltin ? ' · built-in' : ''}
                  </div>
                  <div className="flex flex-wrap gap-2 mt-2">
                    <button
                      type="button"
                      className="text-xs text-poker-gold hover:underline"
                      onClick={() => editPreset(p)}
                    >
                      Edit
                    </button>
                    <button
                      type="button"
                      className="text-xs text-white/70 hover:underline"
                      onClick={() => duplicatePreset(p.id)}
                    >
                      Duplicate
                    </button>
                    {!p.isBuiltin && (
                      <button
                        type="button"
                        className="text-xs text-red-400 hover:underline"
                        onClick={() => deletePreset(p.id, p.name)}
                      >
                        Delete
                      </button>
                    )}
                  </div>
                </li>
              ))}
            </ul>
          )}
        </div>

        <div className="card lg:col-span-2">
          {!draft ? (
            <div className="text-center py-16 text-white/50">
              <p className="mb-4">Select a structure to edit, or create a new one.</p>
              <button type="button" onClick={startNew} className="btn-primary">
                Create custom structure
              </button>
            </div>
          ) : (
            <div className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm text-white/60 mb-1">Name</label>
                  <input
                    className="input-field"
                    value={draft.name}
                    onChange={(e) => setDraft({ ...draft, name: e.target.value })}
                    placeholder="e.g. Pitts Custom"
                  />
                </div>
                <div>
                  <label className="block text-sm text-white/60 mb-1">Description</label>
                  <input
                    className="input-field"
                    value={draft.description}
                    onChange={(e) => setDraft({ ...draft, description: e.target.value })}
                    placeholder="Optional notes"
                  />
                </div>
              </div>

              <div className="flex flex-wrap items-center justify-between gap-2">
                <p className="text-sm text-white/50">
                  Total runtime ≈ <span className="text-poker-gold font-semibold">{totalMin}</span>{' '}
                  minutes ({(totalMin / 60).toFixed(1)} hrs)
                  {draft.isBuiltin ? ' · editing built-in (save overwrites)' : ''}
                </p>
                <div className="flex gap-2 flex-wrap">
                  <button type="button" className="btn-secondary text-sm" onClick={addLevel}>
                    + Level
                  </button>
                  <button type="button" className="btn-secondary text-sm" onClick={addBreak}>
                    + Break
                  </button>
                  <button type="button" className="btn-secondary text-sm" onClick={addAnnouncement}>
                    + Announcement
                  </button>
                </div>
              </div>

              <div className="overflow-x-auto max-h-[28rem] overflow-y-auto border border-white/10 rounded-lg">
                <table className="w-full text-sm">
                  <thead className="sticky top-0 bg-black/80">
                    <tr className="text-white/50 border-b border-white/10">
                      <th className="py-2 px-2 text-left">#</th>
                      <th className="py-2 px-2 text-left">Type</th>
                      <th className="py-2 px-2 text-left">SB</th>
                      <th className="py-2 px-2 text-left">BB</th>
                      <th className="py-2 px-2 text-left">Ante</th>
                      <th className="py-2 px-2 text-left">Minutes</th>
                      <th className="py-2 px-2 text-left">Label / note</th>
                      <th className="py-2 px-2 text-left"> </th>
                    </tr>
                  </thead>
                  <tbody>
                    {draft.levels.map((l, i) => (
                      <tr
                        key={i}
                        className={`border-b border-white/5 ${
                          l.isAnnouncement ? 'bg-amber-500/10' : ''
                        }`}
                      >
                        <td className="py-1.5 px-2 text-white/40">{i + 1}</td>
                        <td className="py-1.5 px-2">
                          {l.isAnnouncement ? (
                            <span className="text-amber-300">Announce</span>
                          ) : l.isBreak ? (
                            <span className="text-sky-300">Break</span>
                          ) : (
                            <span className="text-white/70">Level {l.level}</span>
                          )}
                        </td>
                        <td className="py-1.5 px-2">
                          <input
                            className="input-field w-20 py-1 text-sm"
                            type="number"
                            disabled={!!l.isBreak || !!l.isAnnouncement}
                            value={l.isBreak || l.isAnnouncement ? 0 : l.smallBlind}
                            onChange={(e) =>
                              updateLevel(i, { smallBlind: Number(e.target.value) })
                            }
                          />
                        </td>
                        <td className="py-1.5 px-2">
                          <input
                            className="input-field w-20 py-1 text-sm"
                            type="number"
                            disabled={!!l.isBreak || !!l.isAnnouncement}
                            value={l.isBreak || l.isAnnouncement ? 0 : l.bigBlind}
                            onChange={(e) =>
                              updateLevel(i, { bigBlind: Number(e.target.value) })
                            }
                          />
                        </td>
                        <td className="py-1.5 px-2">
                          <input
                            className="input-field w-20 py-1 text-sm"
                            type="number"
                            disabled={!!l.isBreak || !!l.isAnnouncement}
                            value={l.isBreak || l.isAnnouncement ? 0 : l.ante}
                            onChange={(e) => updateLevel(i, { ante: Number(e.target.value) })}
                          />
                        </td>
                        <td className="py-1.5 px-2">
                          <input
                            className="input-field w-20 py-1 text-sm"
                            type="number"
                            min={0}
                            title={
                              l.isAnnouncement
                                ? 'Hold time in minutes (0 = about 5 seconds)'
                                : 'Level/break length in minutes'
                            }
                            value={l.durationMinutes}
                            onChange={(e) =>
                              updateLevel(i, { durationMinutes: Number(e.target.value) })
                            }
                          />
                        </td>
                        <td className="py-1.5 px-2">
                          {l.isAnnouncement ? (
                            <textarea
                              className="input-field py-1 text-sm min-w-[14rem] min-h-[3.5rem]"
                              value={l.announcementText || ''}
                              placeholder="Spoken after previous level…"
                              onChange={(e) =>
                                updateLevel(i, { announcementText: e.target.value })
                              }
                            />
                          ) : l.isBreak ? (
                            <input
                              className="input-field py-1 text-sm min-w-[10rem]"
                              value={l.breakLabel || ''}
                              onChange={(e) => updateLevel(i, { breakLabel: e.target.value })}
                            />
                          ) : (
                            <span className="text-white/40 text-xs">{formatBlinds(l)}</span>
                          )}
                        </td>
                        <td className="py-1.5 px-2 whitespace-nowrap">
                          <button
                            type="button"
                            className="text-xs text-white/50 hover:text-white mr-1"
                            onClick={() => moveLevel(i, -1)}
                          >
                            ↑
                          </button>
                          <button
                            type="button"
                            className="text-xs text-white/50 hover:text-white mr-1"
                            onClick={() => moveLevel(i, 1)}
                          >
                            ↓
                          </button>
                          <button
                            type="button"
                            className="text-xs text-red-400 hover:underline"
                            onClick={() => removeLevel(i)}
                          >
                            ✕
                          </button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>

              <div className="flex flex-wrap gap-3">
                <button
                  type="button"
                  className="btn-primary"
                  disabled={saving || !draft.name.trim()}
                  onClick={saveDraft}
                >
                  {saving ? 'Saving…' : draft.id ? 'Save changes' : 'Save structure'}
                </button>
                <button
                  type="button"
                  className="btn-secondary"
                  onClick={() => setDraft(null)}
                >
                  Cancel
                </button>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}