'use client';

import React, { useEffect, useState } from 'react';
import { Plus, Search, Pencil, Trash2, Shield } from 'lucide-react';
import { apiRequest } from '../../../lib/api';
import { Badge } from '../../../components/Badge';
import { Button } from '../../../components/Button';
import { Modal } from '../../../components/Modal';
import { AdminImageUpload } from '../../../components/AdminImageUpload';

const blank = { name:'', shortName:'', code:'', logoUrl:'' };

export default function TeamsMasterPage() {
  const [teams,setTeams]=useState<any[]>([]); const [loading,setLoading]=useState(true); const [search,setSearch]=useState('');
  const [open,setOpen]=useState(false); const [editing,setEditing]=useState<any>(null); const [form,setForm]=useState(blank); const [saving,setSaving]=useState(false);

  const load=async()=>{ try{setLoading(true); const r=await apiRequest(`/teams?${search?`search=${encodeURIComponent(search)}`:''}`); setTeams(r.data||[]);}catch(e){console.error(e)}finally{setLoading(false)} };
  useEffect(()=>{load()},[]);
  const startCreate=()=>{setEditing(null);setForm(blank);setOpen(true)};
  const startEdit=(t:any)=>{setEditing(t);setForm({name:t.name||'',shortName:t.shortName||'',code:t.code||'',logoUrl:t.logoUrl||''});setOpen(true)};
  const save=async(e:React.FormEvent)=>{e.preventDefault();setSaving(true);try{const body={...form,shortName:form.shortName.toUpperCase(),code:form.code.toUpperCase()};await apiRequest(editing?`/teams/${editing._id}`:'/teams',{method:editing?'PATCH':'POST',body:JSON.stringify(body)});setOpen(false);await load()}catch(e:any){alert(e.message||'Unable to save team')}finally{setSaving(false)}};
  const del=async(t:any)=>{if(!confirm(`Delete ${t.name}?`))return;try{await apiRequest(`/teams/${t._id}`,{method:'DELETE'});await load()}catch(e:any){alert(e.message||'Unable to delete team')}};

  return <div className="admin-page space-y-6">
    <div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between"><div><div className="admin-kicker">Master Data · Section 2</div><h1 className="admin-title">Team Master</h1><p className="admin-subtitle">Create, edit and manage the teams used across MY11s.</p></div><Button onClick={startCreate} className="!bg-red-600 hover:!bg-red-500 gap-2"><Plus className="h-4 w-4"/> Add Team</Button></div>
    <div className="admin-panel p-4"><div className="relative max-w-xl"><Search className="absolute left-3 top-3 h-4 w-4 text-zinc-600"/><input className="admin-input pl-10" placeholder="Search team name, short name or code…" value={search} onChange={e=>setSearch(e.target.value)} onKeyDown={e=>e.key==='Enter'&&load()}/></div></div>
    <div className="admin-panel overflow-hidden"><div className="flex items-center justify-between border-b border-white/5 px-5 py-4"><div className="text-sm font-extrabold text-white">Teams</div><div className="text-[10px] text-zinc-600">{teams.length} records</div></div><div className="overflow-x-auto"><table className="admin-table min-w-[720px]"><thead><tr><th>Team</th><th>Short Name</th><th>Code</th><th>Players</th><th>Status</th><th className="text-right">Actions</th></tr></thead><tbody>
      {loading?<tr><td colSpan={6} className="py-12 text-center text-zinc-600">Loading teams…</td></tr>:teams.length===0?<tr><td colSpan={6} className="py-12 text-center text-zinc-600">No teams found.</td></tr>:teams.map(t=><tr key={t._id}><td><div className="flex items-center gap-3"><div className="h-10 w-10 overflow-hidden rounded-xl border border-white/8 bg-black/20 flex items-center justify-center">{t.logoUrl?<img src={t.logoUrl} alt="" className="h-full w-full object-contain"/>:<Shield className="h-4 w-4 text-red-400"/>}</div><div><div className="font-bold text-white">{t.name}</div><div className="text-[9px] text-zinc-600">Team Master</div></div></div></td><td className="font-bold text-zinc-300">{t.shortName}</td><td className="font-mono text-red-400">{t.code}</td><td>{t.playerIds?.length||0}</td><td><Badge variant={t.status==='ACTIVE'?'emerald':'slate'}>{t.status}</Badge></td><td><div className="flex justify-end gap-2"><button className="admin-action" onClick={()=>startEdit(t)}><Pencil className="h-3.5 w-3.5"/> Edit</button><button className="admin-action red" onClick={()=>del(t)}><Trash2 className="h-3.5 w-3.5"/> Delete</button></div></td></tr>)}
    </tbody></table></div></div>
    <Modal isOpen={open} onClose={()=>setOpen(false)} title={editing?'Edit Team':'Add Team'}>
      <form onSubmit={save} className="space-y-4"><div><label className="admin-label">Team Name *</label><input required className="admin-input" value={form.name} onChange={e=>setForm({...form,name:e.target.value})}/></div><div className="grid grid-cols-2 gap-3"><div><label className="admin-label">Short Name *</label><input required className="admin-input" value={form.shortName} onChange={e=>setForm({...form,shortName:e.target.value})}/></div><div><label className="admin-label">Code *</label><input required className="admin-input uppercase" value={form.code} onChange={e=>setForm({...form,code:e.target.value})}/></div></div><AdminImageUpload kind="teams" label="Team Logo · Optional" value={form.logoUrl} onChange={logoUrl=>setForm({...form,logoUrl})}/><div className="flex justify-end gap-2 pt-2"><Button type="button" variant="ghost" onClick={()=>setOpen(false)}>Cancel</Button><Button type="submit" loading={saving} className="!bg-red-600 hover:!bg-red-500">{editing?'Save Changes':'Create Team'}</Button></div></form>
    </Modal>
  </div>;
}