"use client";
import { useEffect,useState } from "react";
import type { Venue } from "../../lib/venues";

const blank:Venue={id:0,name:"",neighborhood:"",city:"Indianapolis",address:"",phone:"",website:"",notes:"",reservationInfo:"",audioOn:true,verified:false,status:"community",hidden:false,latitude:39.7684,longitude:-86.1581,updatedAt:"",isSample:false};

export default function AdminDashboard({adminName}:{adminName:string}){
 const [venues,setVenues]=useState<Venue[]>([]),[editing,setEditing]=useState<Venue|null>(null),[saving,setSaving]=useState(false),[message,setMessage]=useState("");
 const load=()=>fetch("/api/venues?admin=1").then(r=>r.json()).then(d=>setVenues(d.venues??[])); useEffect(()=>{load()},[]);
 const save=async()=>{if(!editing)return;setSaving(true);setMessage("");const res=await fetch("/api/venues",{method:editing.id?"PUT":"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(editing)});const data=await res.json();setSaving(false);if(!res.ok){setMessage(data.error??"Could not save venue");return}setEditing(null);setMessage("Venue saved.");load()};
 const remove=async(v:Venue)=>{if(!confirm(`Delete ${v.name}? This cannot be undone.`))return;await fetch(`/api/venues?id=${v.id}`,{method:"DELETE"});load()};
 const toggle=async(v:Venue,key:"hidden"|"verified")=>{await fetch("/api/venues",{method:"PUT",headers:{"Content-Type":"application/json"},body:JSON.stringify({...v,[key]:!v[key],status:key==="verified"&&!v.verified?"verified":v.status})});load()};
 return <main className="admin-page"><header className="admin-nav"><a className="brand" href="/"><span className="brand-mark">?</span><span>DO THEY PACERS?</span></a><div><span>Signed in as {adminName}</span><a href="/signout-with-chatgpt?return_to=/">Sign out</a></div></header>
  <section className="admin-wrap"><div className="admin-heading"><div><span className="kicker">VENUE CONTROL</span><h1>Keep game night<br/><em>up to date.</em></h1><p>Add, verify, hide, or edit listings. Public changes appear as soon as they are saved.</p></div><button className="primary" onClick={()=>setEditing({...blank})}>+ Add venue</button></div>
  <div className="admin-stats"><div><b>{venues.length}</b><span>Total venues</span></div><div><b>{venues.filter(v=>!v.hidden).length}</b><span>Public</span></div><div><b>{venues.filter(v=>v.verified).length}</b><span>Verified</span></div><div><b>{venues.filter(v=>v.status==="needs-review").length}</b><span>Need review</span></div></div>
  {message&&<div className="success-message">{message}</div>}
  <div className="admin-table"><div className="table-head"><span>Venue</span><span>Status</span><span>Audio</span><span>Visibility</span><span>Actions</span></div>{venues.map(v=><div className={`table-row ${v.hidden?"is-hidden":""}`} key={v.id}><div><b>{v.name}</b><small>{v.neighborhood} · {v.city}{v.isSample?" · SAMPLE":""}</small></div><button className={`status-pill ${v.verified?"verified":""}`} onClick={()=>toggle(v,"verified")}>{v.verified?"✓ Verified":v.status.replace("-"," ")}</button><span>{v.audioOn?"🔊 On":"— Ask"}</span><button className="visibility" onClick={()=>toggle(v,"hidden")}>{v.hidden?"Hidden":"● Live"}</button><div className="row-actions"><button onClick={()=>setEditing({...v})}>Edit</button><button className="delete" onClick={()=>remove(v)}>Delete</button></div></div>)}</div>
  <div className="admin-tip"><b>Protected by ChatGPT sign-in</b><p>Only signed-in visitors can open this dashboard or change venue records. Local development uses a safe preview mode.</p></div></section>
  {editing&&<VenueForm venue={editing} setVenue={setEditing} close={()=>setEditing(null)} save={save} saving={saving} error={message}/>}</main>
}

function VenueForm({venue:v,setVenue,close,save,saving,error}:{venue:Venue;setVenue:(v:Venue)=>void;close:()=>void;save:()=>void;saving:boolean;error:string}){
 const field=(key:keyof Venue,value:string|boolean|number)=>setVenue({...v,[key]:value});
 return <div className="modal-backdrop"><section className="admin-modal" role="dialog" aria-modal="true"><div className="form-title"><div><span className="kicker">{v.id?"EDIT LISTING":"NEW LISTING"}</span><h2>{v.id?v.name:"Add a venue"}</h2></div><button onClick={close} aria-label="Close">×</button></div><div className="form-grid"><label>Venue name *<input value={v.name} onChange={e=>field("name",e.target.value)}/></label><label>Neighborhood<input value={v.neighborhood} onChange={e=>field("neighborhood",e.target.value)}/></label><label>City *<input value={v.city} onChange={e=>field("city",e.target.value)}/></label><label className="wide">Street address *<input value={v.address} onChange={e=>field("address",e.target.value)}/></label><label>Phone<input value={v.phone} onChange={e=>field("phone",e.target.value)}/></label><label>Website<input type="url" value={v.website} onChange={e=>field("website",e.target.value)}/></label><label className="wide">Game-day notes<textarea value={v.notes} onChange={e=>field("notes",e.target.value)}/></label><label className="wide">Reservation information<input value={v.reservationInfo} onChange={e=>field("reservationInfo",e.target.value)}/></label><label>Status<select value={v.status} onChange={e=>field("status",e.target.value)}><option value="community">Community</option><option value="verified">Verified</option><option value="needs-review">Needs review</option></select></label><div className="checks"><label><input type="checkbox" checked={v.audioOn} onChange={e=>field("audioOn",e.target.checked)}/> Game audio on</label><label><input type="checkbox" checked={v.verified} onChange={e=>field("verified",e.target.checked)}/> Verified</label><label><input type="checkbox" checked={v.hidden} onChange={e=>field("hidden",e.target.checked)}/> Hidden</label></div></div>{error&&<p className="form-error">{error}</p>}<div className="form-actions"><button onClick={close}>Cancel</button><button className="primary" disabled={saving} onClick={save}>{saving?"Saving…":"Save venue"}</button></div></section></div>
}