import { Card, date, Empty, Field } from '@/Components/AppUi';
import { useForm } from '@inertiajs/react';

export type PlatformSettings = { support_email?: string; support_phone?: string; reminder_lead_days?: string };
export type SupportTicket = { id: number; organization_name: string; subject: string; message: string; reply: string | null; status: string; created_at: string; priority: number };
export type WaitlistEntry = { id: number; organization_name: string; created_at: string };

export function SettingsForm({ settings, operations }: { settings: PlatformSettings; operations: { queuedJobs: number; failedJobs: number; openTickets: number } }) {
    const form = useForm({ support_email: settings.support_email ?? '', support_phone: settings.support_phone ?? '', reminder_lead_days: settings.reminder_lead_days ?? '7', reason: '' });
    return <div className="two-column"><Card title="Paramètres généraux"><form onSubmit={e => { e.preventDefault(); form.patch(route('admin.settings.update')); }}><div className="space-y-4"><Field label="Adresse e-mail publique du support" error={form.errors.support_email}><input type="email" maxLength={255} value={form.data.support_email} onChange={e => form.setData('support_email', e.target.value)} /></Field><Field label="Téléphone du support" error={form.errors.support_phone}><input maxLength={30} value={form.data.support_phone} onChange={e => form.setData('support_phone', e.target.value)} /></Field><Field label="Nombre de jours avant une échéance à notifier" error={form.errors.reminder_lead_days}><input type="number" min="1" max="30" required value={form.data.reminder_lead_days} onChange={e => form.setData('reminder_lead_days', e.target.value)} /></Field><Field label="Motif du changement" error={form.errors.reason}><input minLength={5} maxLength={255} required value={form.data.reason} onChange={e => form.setData('reason', e.target.value)} /></Field></div><button className="btn mt-5" disabled={form.processing}>Enregistrer et journaliser</button></form></Card><Card title="Suivi des traitements"><div className="info-list"><p className="status-note">Tâches en attente : <strong>{operations.queuedJobs}</strong></p><p className="status-note">Tâches en échec : <strong>{operations.failedJobs}</strong></p><p className="status-note">Demandes d’aide ouvertes : <strong>{operations.openTickets}</strong></p></div><p className="status-note mt-5">Le planificateur et le worker doivent être supervisés sur l’hébergement. Les secrets SMTP et prestataires restent dans l’environnement du serveur, jamais dans ce formulaire.</p></Card></div>;
}
function TicketReply({ ticket }: { ticket: SupportTicket }) {
    const form = useForm({ reply: ticket.reply ?? '', status: ticket.status });
    return <Card title={`#${ticket.id} · ${ticket.subject}`}><p className="status-note">{ticket.organization_name} · {date(ticket.created_at)} {Boolean(ticket.priority) && <span className="badge badge-open ml-2">Priorité Prestige</span>}</p><p className="my-5 whitespace-pre-wrap text-sm">{ticket.message}</p><form onSubmit={e => { e.preventDefault(); form.patch(route('admin.support.update', ticket.id)); }}><div className="form-grid"><Field label="Réponse publiée dans le commerce" error={form.errors.reply}><textarea rows={4} minLength={5} maxLength={4000} required value={form.data.reply} onChange={e => form.setData('reply', e.target.value)} /></Field><Field label="État" error={form.errors.status}><select value={form.data.status} onChange={e => form.setData('status', e.target.value)}><option value="open">Ouverte</option><option value="closed">Traitée</option></select></Field></div><button className="btn mt-4" disabled={form.processing}>Publier la réponse</button></form></Card>;
}
export function SupportPanel({ tickets }: { tickets: SupportTicket[] }) {
    return tickets.length ? <div className="space-y-5">{tickets.map(t => <TicketReply key={t.id} ticket={t} />)}</div> : <Card title="Assistance plateforme"><Empty text="Aucune demande d’assistance." /></Card>;
}
export function WaitlistPanel({ entries }: { entries: WaitlistEntry[] }) {
    return <Card title="Liste d’intérêt Prestige">{entries.length ? <div className="app-table-wrap"><table className="app-table"><thead><tr><th>Commerce</th><th>Date d’inscription</th></tr></thead><tbody>{entries.map(e => <tr key={e.id}><td>{e.organization_name}</td><td>{date(e.created_at)}</td></tr>)}</tbody></table></div> : <Empty text="Aucun commerce inscrit à la liste d’intérêt." />}</Card>;
}