import { Card, date, ErrorList, Field } from '@/Components/AppUi';
import Modal from '@/Components/Modal';
import { router, useForm } from '@inertiajs/react';
import { useState } from 'react';

type Member = { id: number; name: string; pivot: { role: string } };
type Invite = { id: number; email: string; role: string; expires_at: string };

export function TeamTools({ members, invitations, canInvite, organizationName }: { members: Member[]; invitations: Invite[]; canInvite: boolean; organizationName: string }) {
    const invite = useForm({ email: '', role: 'reader' });
    const transfer = useForm({ user_id: '', password: '' });
    const close = useForm({ password: '', confirmation: '', reason: '' });
    const [closing, setClosing] = useState(false);
    return <div className="space-y-6 mt-6">
        <Card title="Inviter un membre"><p className="status-note mb-5">Une invitation expire après 48 heures et doit être acceptée par la personne connectée avec la bonne adresse. Aucune appartenance n’est créée automatiquement.</p>{canInvite ? <form onSubmit={e => { e.preventDefault(); invite.post(route('team.invite'), { onSuccess: () => invite.reset() }); }}><div className="form-grid"><Field label="Adresse e-mail" error={invite.errors.email}><input type="email" required value={invite.data.email} onChange={e => invite.setData('email', e.target.value.toLowerCase())} /></Field><Field label="Rôle proposé" error={invite.errors.role}><select value={invite.data.role} onChange={e => invite.setData('role', e.target.value)}><option value="reader">Lecteur</option><option value="manager">Gestionnaire</option></select></Field></div><button className="btn mt-4" disabled={invite.processing}>Envoyer l’invitation</button></form> : <div className="alert alert-info">Les nouvelles invitations nécessitent un accès Prestige actif. Les membres existants conservent leurs accès.</div>}
        {invitations.length > 0 && <div className="app-table-wrap mt-6"><table className="app-table"><thead><tr><th>Invitation</th><th>Expiration</th><th>Action</th></tr></thead><tbody>{invitations.map(i => <tr key={i.id}><td>{i.email}<span className="table-secondary">{i.role === 'reader' ? 'Lecteur' : 'Gestionnaire'}</span></td><td>{date(i.expires_at)}</td><td><button className="text-action" onClick={() => router.delete(route('team.invitations.revoke', i.id))}>Révoquer</button></td></tr>)}</tbody></table></div>}</Card>
        <Card title="Retirer un accès"><p className="status-note mb-4">Le retrait prend effet dès la prochaine requête du membre. Ses opérations passées restent conservées.</p>{members.filter(m => m.pivot.role !== 'owner').map(m => <div key={m.id} className="flex justify-between items-center py-3 border-b border-slate-100 text-sm"><span>{m.name}</span><button className="text-action" onClick={() => { if (confirm(`Retirer l’accès de ${m.name} ?`)) router.delete(route('team.remove', m.id)); }}>Retirer du commerce</button></div>)}</Card>
        {members.some(m => m.pivot.role !== 'owner') && <Card title="Transférer la propriété"><p className="status-note mb-5">Le nouveau propriétaire reçoit le contrôle du commerce. Vous devenez gestionnaire ; les invitations encore ouvertes sont révoquées.</p><form onSubmit={e => { e.preventDefault(); if (confirm('Confirmer le transfert de propriété ?')) transfer.post(route('team.transfer'), { onFinish: () => transfer.reset('password') }); }}><div className="form-grid"><Field label="Nouveau propriétaire" error={transfer.errors.user_id}><select required value={transfer.data.user_id} onChange={e => transfer.setData('user_id', e.target.value)}><option value="">Choisir un membre existant</option>{members.filter(m => m.pivot.role !== 'owner').map(m => <option key={m.id} value={m.id}>{m.name}</option>)}</select></Field><Field label="Votre mot de passe" error={transfer.errors.password}><input type="password" autoComplete="current-password" required value={transfer.data.password} onChange={e => transfer.setData('password', e.target.value)} /></Field></div><button className="btn mt-5" disabled={transfer.processing}>Transférer la propriété</button></form></Card>}
        <Card title="Clôturer le commerce"><p className="status-note">La clôture bloque les accès et les nouvelles opérations. Les créances et remboursements sont conservés ; aucune donnée n’est effacée automatiquement. Le support traite séparément vos demandes relatives à leur conservation.</p><button className="btn btn-danger mt-4" onClick={() => setClosing(true)}>Demander la clôture</button><Modal show={closing} onClose={() => setClosing(false)}><form className="p-7" onSubmit={e => { e.preventDefault(); close.post(route('team.close'), { onFinish: () => close.reset('password') }); }}><h2 className="font-semibold text-lg mb-5">Clôturer {organizationName}</h2><ErrorList errors={close.errors} /><div className="space-y-4"><Field label={`Recopiez le nom : ${organizationName}`}><input required value={close.data.confirmation} onChange={e => close.setData('confirmation', e.target.value)} /></Field><Field label="Motif de clôture"><input minLength={5} maxLength={255} required value={close.data.reason} onChange={e => close.setData('reason', e.target.value)} /></Field><Field label="Votre mot de passe"><input type="password" required autoComplete="current-password" value={close.data.password} onChange={e => close.setData('password', e.target.value)} /></Field></div><div className="form-actions"><button type="button" className="btn btn-light" onClick={() => setClosing(false)}>Annuler</button><button className="btn btn-danger" disabled={close.processing}>Clôturer sans effacer les historiques</button></div></form></Modal></Card>
    </div>;
}

export function DebtCorrection({ debt }: { debt: { id: number; amount: number; description: string; goods: string | null; due_date: string } }) {
    const [open, setOpen] = useState(false);
    const form = useForm({ amount: String(debt.amount), description: debt.description, goods: debt.goods ?? '', due_date: debt.due_date, reason: '' });
    return <><button className="text-action" onClick={() => setOpen(true)}>Corriger</button><Modal show={open} onClose={() => setOpen(false)}><form className="p-7" onSubmit={e => { e.preventDefault(); form.patch(route('receivables.correct', debt.id), { onSuccess: () => setOpen(false) }); }}><h2 className="font-semibold text-lg mb-5">Corriger la créance #{debt.id}</h2><p className="status-note mb-5">Possible uniquement sans historique de remboursement. La version précédente sera conservée.</p><ErrorList errors={form.errors} /><div className="form-grid"><Field label="Montant FCFA"><input type="number" step="1" min="1" max="999999999999" required value={form.data.amount} onChange={e => form.setData('amount', e.target.value)} /></Field><Field label="Échéance"><input type="date" required value={form.data.due_date} onChange={e => form.setData('due_date', e.target.value)} /></Field><Field label="Motif de la créance"><input required maxLength={255} value={form.data.description} onChange={e => form.setData('description', e.target.value)} /></Field><Field label="Marchandises"><textarea maxLength={2000} value={form.data.goods} onChange={e => form.setData('goods', e.target.value)} /></Field><Field label="Raison de la correction"><input required minLength={5} maxLength={255} value={form.data.reason} onChange={e => form.setData('reason', e.target.value)} /></Field></div><div className="form-actions"><button type="button" className="btn btn-light" onClick={() => setOpen(false)}>Annuler</button><button disabled={form.processing} className="btn">Corriger et journaliser</button></div></form></Modal></>;
}

export function ReversePayment({ id }: { id: number }) {
    const [open, setOpen] = useState(false);
    const form = useForm({ reason: '', password: '' });
    return <><button className="text-action" onClick={() => setOpen(true)}>Contrepasser</button><Modal show={open} onClose={() => setOpen(false)}><form className="p-7" onSubmit={e => { e.preventDefault(); form.post(route('repayments.reverse', id), { onSuccess: () => setOpen(false), onFinish: () => form.reset('password') }); }}><h2 className="font-semibold text-lg mb-4">Contrepasser le règlement #{id}</h2><p className="status-note mb-5">Le règlement restera visible mais ne sera plus comptabilisé dans le solde. Aucun transfert d’argent n’est effectué.</p><div className="space-y-4"><Field label="Motif obligatoire" error={form.errors.reason}><input minLength={5} maxLength={255} required value={form.data.reason} onChange={e => form.setData('reason', e.target.value)} /></Field><Field label="Votre mot de passe" error={form.errors.password}><input type="password" required autoComplete="current-password" value={form.data.password} onChange={e => form.setData('password', e.target.value)} /></Field></div><div className="form-actions"><button type="button" className="btn btn-light" onClick={() => setOpen(false)}>Annuler</button><button disabled={form.processing} className="btn btn-danger">Confirmer la contrepassation</button></div></form></Modal></>;
}