import { useEffect, useState } from 'react';
import { Save, RefreshCcw, Plus, Trash2, Crown, Calculator } from 'lucide-react';
import { api } from '../lib/api';
import '../styles/module-premium.css';

type Tier = { name:string; minPoints:number; discountPercent:number; benefits?:string };

const emptyTier: Tier = { name:'', minPoints:0, discountPercent:0, benefits:'' };

export default function LoyaltyVipSettingsPage(){
  const [settings,setSettings]=useState<any>({ tiers:[] });
  const [loading,setLoading]=useState(false);
  const [message,setMessage]=useState('');
  const [error,setError]=useState('');

  const load=async()=>{ setLoading(true); setError(''); try{ setSettings(await api.get('/customers/loyalty/settings')); }catch(e:any){ setError(e?.message||'Erreur chargement règles fidélité'); } finally{ setLoading(false); } };
  useEffect(()=>{ load(); },[]);

  const update=(k:string,v:any)=>setSettings((s:any)=>({...s,[k]:v}));
  const updateTier=(i:number,k:keyof Tier,v:any)=>setSettings((s:any)=>({...s, tiers:(s.tiers||[]).map((t:Tier,idx:number)=>idx===i?{...t,[k]:v}:t)}));
  const addTier=()=>setSettings((s:any)=>({...s, tiers:[...(s.tiers||[]), {...emptyTier, name:`Niveau ${(s.tiers||[]).length+1}` }]}));
  const removeTier=(i:number)=>setSettings((s:any)=>({...s, tiers:(s.tiers||[]).filter((_:any,idx:number)=>idx!==i)}));

  const save=async()=>{ setLoading(true); setMessage(''); setError(''); try{ const res=await api.patch('/customers/loyalty/settings', settings); setSettings(res); setMessage('Règles Fidélité & VIP sauvegardées.'); }catch(e:any){ setError(e?.message||'Erreur sauvegarde'); } finally{ setLoading(false); } };
  const recalc=async()=>{ setLoading(true); setMessage(''); setError(''); try{ const res:any=await api.post('/customers/loyalty/recalculate',{}); setMessage(`Recalcul terminé : ${res?.count||0} client(s) mis à jour.`); }catch(e:any){ setError(e?.message||'Erreur recalcul'); } finally{ setLoading(false); } };

  return <main className="module-premium-page">
    <section className="premium-hero"><div><p className="premium-kicker">CONFIGURATION PREMIUM</p><h1><Crown size={28}/> Fidélité & VIP</h1><p>Configure librement les points, niveaux, remises, avantages et conditions VIP automatiques.</p></div><div className="premium-actions"><button onClick={load}><RefreshCcw size={16}/> Actualiser</button><button onClick={recalc}><Calculator size={16}/> Recalculer clients</button><button className="primary" onClick={save}><Save size={16}/> Sauvegarder</button></div></section>

    {error && <div className="premium-error">{error}</div>}
    {message && <div className="premium-success">{message}</div>}

    <section className="premium-table-card">
      <h3>Calcul automatique des points</h3>
      <div className="premium-form-grid">
        <label><span>Montant de référence</span><input type="number" value={settings.pointsAmountUnit||100} onChange={e=>update('pointsAmountUnit',Number(e.target.value))}/><small>Ex: 100 TND</small></label>
        <label><span>Points gagnés</span><input type="number" value={settings.pointsPerUnit||10} onChange={e=>update('pointsPerUnit',Number(e.target.value))}/><small>Ex: 10 points pour 100 TND</small></label>
        <label><span>VIP automatique</span><select value={String(settings.autoVip!==false)} onChange={e=>update('autoVip',e.target.value==='true')}><option value="true">Oui</option><option value="false">Non</option></select></label>
      </div>
    </section>

    <section className="premium-table-card">
      <div className="premium-section-title"><h3>Niveaux fidélité personnalisables</h3><button className="premium-inline-action" onClick={addTier}><Plus size={14}/> Ajouter niveau</button></div>
      <div className="premium-table-wrap"><table><thead><tr><th>Niveau</th><th>Points min.</th><th>Remise %</th><th>Avantages</th><th></th></tr></thead><tbody>{(settings.tiers||[]).map((tier:Tier,i:number)=><tr key={i}><td><input value={tier.name} onChange={e=>updateTier(i,'name',e.target.value)} placeholder="Gold"/></td><td><input type="number" value={tier.minPoints||0} onChange={e=>updateTier(i,'minPoints',Number(e.target.value))}/></td><td><input type="number" value={tier.discountPercent||0} onChange={e=>updateTier(i,'discountPercent',Number(e.target.value))}/></td><td><input value={tier.benefits||''} onChange={e=>updateTier(i,'benefits',e.target.value)} placeholder="Remise, priorité, surclassement..."/></td><td><button className="premium-icon-btn" onClick={()=>removeTier(i)}><Trash2 size={15}/></button></td></tr>)}</tbody></table></div>
    </section>

    <section className="premium-table-card">
      <h3>Conditions VIP automatiques</h3>
      <div className="premium-form-grid">
        <label><span>Total dépenses minimum</span><input type="number" value={settings.vipMinSpent||0} onChange={e=>update('vipMinSpent',Number(e.target.value))}/><small>Ex: 10000 TND</small></label>
        <label><span>Nombre réservations minimum</span><input type="number" value={settings.vipMinBookings||0} onChange={e=>update('vipMinBookings',Number(e.target.value))}/><small>Ex: 10 réservations</small></label>
        <label><span>Niveau minimum VIP</span><input value={settings.vipMinTier||'Gold'} onChange={e=>update('vipMinTier',e.target.value)} placeholder="Gold"/><small>Ex: Gold, Platinum, Diamond ou ton propre nom</small></label>
      </div>
      <p className="premium-modal-text">Le backend marque automatiquement VIP si une des conditions est atteinte : dépenses, nombre de réservations ou niveau minimum.</p>
    </section>
  </main>;
}