'use client';

import { useState, useEffect, useCallback, useRef } from 'react';
import { Player } from '@/lib/types';

export default function PlayersPage() {
  const [players, setPlayers] = useState<Player[]>([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState('');
  const [editing, setEditing] = useState<Player | null>(null);
  const [showForm, setShowForm] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);

  const [form, setForm] = useState({
    firstName: '',
    lastName: '',
    email: '',
    phone: '',
    nickname: '',
    memberId: '',
    notes: '',
  });

  const fetchPlayers = useCallback(async () => {
    const res = await fetch('/api/players');
    const data = await res.json();
    setPlayers(data);
    setLoading(false);
  }, []);

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

  const resetForm = () => {
    setForm({ firstName: '', lastName: '', email: '', phone: '', nickname: '', memberId: '', notes: '' });
    setEditing(null);
    setShowForm(false);
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!form.firstName || !form.lastName) return;

    const payload = {
      ...form,
      email: form.email || undefined,
      phone: form.phone || undefined,
      nickname: form.nickname || undefined,
      memberId: form.memberId || undefined,
      notes: form.notes || undefined,
    };

    if (editing) {
      await fetch('/api/players', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ id: editing.id, ...payload }),
      });
    } else {
      await fetch('/api/players', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
    }

    resetForm();
    fetchPlayers();
  };

  const handleEdit = (player: Player) => {
    setEditing(player);
    setForm({
      firstName: player.firstName,
      lastName: player.lastName,
      email: player.email ?? '',
      phone: player.phone ?? '',
      nickname: player.nickname ?? '',
      memberId: player.memberId ?? '',
      notes: player.notes ?? '',
    });
    setShowForm(true);
  };

  const handleDelete = async (id: string) => {
    if (!confirm('Delete this player?')) return;
    await fetch(`/api/players?id=${id}`, { method: 'DELETE' });
    fetchPlayers();
  };

  const handleExport = () => {
    window.open('/api/export?type=players', '_blank');
  };

  const handleImport = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    const csv = await file.text();
    await fetch('/api/players', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ action: 'import', csv }),
    });
    fetchPlayers();
    if (fileInputRef.current) fileInputRef.current.value = '';
  };

  const filtered = players.filter((p) => {
    const q = search.toLowerCase();
    return (
      p.firstName.toLowerCase().includes(q) ||
      p.lastName.toLowerCase().includes(q) ||
      (p.nickname?.toLowerCase().includes(q) ?? false) ||
      (p.email?.toLowerCase().includes(q) ?? false) ||
      (p.memberId?.toLowerCase().includes(q) ?? false)
    );
  });

  return (
    <div className="max-w-7xl mx-auto px-4 py-8">
      <div className="flex flex-wrap items-center justify-between gap-4 mb-6">
        <h1 className="text-3xl font-display font-bold text-poker-gold">Player Database</h1>
        <div className="flex flex-wrap gap-2">
          <button onClick={() => { resetForm(); setShowForm(true); }} className="btn-primary">
            + Add Player
          </button>
          <button onClick={handleExport} className="btn-secondary">
            Export CSV
          </button>
          <label className="btn-secondary cursor-pointer">
            Import CSV
            <input ref={fileInputRef} type="file" accept=".csv" onChange={handleImport} className="hidden" />
          </label>
        </div>
      </div>

      {showForm && (
        <div className="card mb-6">
          <h2 className="text-xl font-semibold mb-4">{editing ? 'Edit Player' : 'New Player'}</h2>
          <form onSubmit={handleSubmit} className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <input className="input-field" placeholder="First Name *" value={form.firstName} onChange={(e) => setForm({ ...form, firstName: e.target.value })} required />
            <input className="input-field" placeholder="Last Name *" value={form.lastName} onChange={(e) => setForm({ ...form, lastName: e.target.value })} required />
            <input className="input-field" placeholder="Email" type="email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} />
            <input className="input-field" placeholder="Phone" value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} />
            <input className="input-field" placeholder="Nickname" value={form.nickname} onChange={(e) => setForm({ ...form, nickname: e.target.value })} />
            <input className="input-field" placeholder="Member ID" value={form.memberId} onChange={(e) => setForm({ ...form, memberId: e.target.value })} />
            <input className="input-field md:col-span-2" placeholder="Notes" value={form.notes} onChange={(e) => setForm({ ...form, notes: e.target.value })} />
            <div className="md:col-span-2 flex gap-2">
              <button type="submit" className="btn-primary">{editing ? 'Update' : 'Create'}</button>
              <button type="button" onClick={resetForm} className="btn-secondary">Cancel</button>
            </div>
          </form>
        </div>
      )}

      <input
        className="input-field mb-4"
        placeholder="Search players..."
        value={search}
        onChange={(e) => setSearch(e.target.value)}
      />

      {loading ? (
        <p className="text-white/60">Loading...</p>
      ) : filtered.length === 0 ? (
        <div className="card text-center py-12">
          <p className="text-white/60">No players found. Add players or import a CSV file.</p>
        </div>
      ) : (
        <div className="card overflow-x-auto">
          <table className="w-full text-left">
            <thead>
              <tr className="border-b border-white/10 text-white/50 text-sm">
                <th className="py-3 px-4">Name</th>
                <th className="py-3 px-4">Nickname</th>
                <th className="py-3 px-4">Email</th>
                <th className="py-3 px-4">Phone</th>
                <th className="py-3 px-4">Member ID</th>
                <th className="py-3 px-4">Actions</th>
              </tr>
            </thead>
            <tbody>
              {filtered.map((p) => (
                <tr key={p.id} className="border-b border-white/5 hover:bg-white/5">
                  <td className="py-3 px-4 font-medium">{p.firstName} {p.lastName}</td>
                  <td className="py-3 px-4 text-white/70">{p.nickname ?? '—'}</td>
                  <td className="py-3 px-4 text-white/70">{p.email ?? '—'}</td>
                  <td className="py-3 px-4 text-white/70">{p.phone ?? '—'}</td>
                  <td className="py-3 px-4 text-white/70">{p.memberId ?? '—'}</td>
                  <td className="py-3 px-4">
                    <button onClick={() => handleEdit(p)} className="text-poker-gold hover:underline mr-3">Edit</button>
                    <button onClick={() => handleDelete(p.id)} className="text-red-400 hover:underline">Delete</button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
          <p className="text-sm text-white/40 mt-4 px-4">{filtered.length} player(s)</p>
        </div>
      )}
    </div>
  );
}