apps/admin/src/pages/TrackFormPage.tsx

import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useParams, useNavigate } from 'react-router-dom';
import { ArrowLeft, Save } from 'lucide-react';
import { useAuth } from '../lib/auth';
import { useTenant } from '../lib/tenant';
import { api } from '../lib/api';
import { logError } from '../lib/logger';

export default function TrackFormPage() {
    const { t } = useTranslation();
    const { token } = useAuth();
    const { selectedOrgId } = useTenant();
    const { id } = useParams<{ id: string }>(); 
    const navigate = useNavigate();
    const isNew = id === 'new';
    
    const [form, setForm] = useState({ 
        title: '', description: '', duration: 7, language: 'FR', 
        isPremium: false, priceAmount: 0
    });
    const [saving, setSaving] = useState(false);

    useEffect(() => { 
        if (!isNew && token && selectedOrgId) {
            api.get(`/v1/admin/tracks/${id}`, token, selectedOrgId)
                .then(t => setForm({ 
                    title: t.title, description: t.description || '', duration: t.duration, 
                    language: t.language, isPremium: t.isPremium, priceAmount: t.priceAmount || 0
                })); 
        }
    }, [id, token, selectedOrgId, isNew]);

    const inp = "w-full border border-slate-200 rounded-xl px-4 py-2.5 text-sm outline-none focus:ring-2 focus:ring-slate-300";

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault(); 
        if (!token || !selectedOrgId) return;
        setSaving(true);
        const payload = { 
            ...form, 
            priceAmount: form.priceAmount || undefined
        };
        try {
            if (isNew) {
                await api.post('/v1/admin/tracks', payload, token, selectedOrgId);
            } else {
                await api.put(`/v1/admin/tracks/${id}`, payload, token, selectedOrgId);
            }
            navigate('/content');
        } catch (err) {
            logError(err);
        } finally {
            setSaving(false);
        }
    };

    return (
        <div className="p-8 max-w-xl">
            <div className="flex items-center gap-3 mb-6">
                <button onClick={() => navigate('/content')} className="p-2 hover:bg-slate-100 rounded-lg"><ArrowLeft className="w-4 h-4" /></button>
                <h1 className="text-2xl font-bold text-slate-800">{isNew ? t('tracks.new') : t('common.edit')}</h1>
            </div>
            <form onSubmit={handleSubmit} className="bg-white rounded-2xl border border-slate-100 p-6 space-y-4 shadow-sm">
                <div><label className="text-sm font-medium text-slate-700 mb-1 block">{t('tracks.form_title_label')} *</label>
                    <input required className={inp} value={form.title} onChange={e => setForm(f => ({ ...f, title: e.target.value }))} /></div>
                <div><label className="text-sm font-medium text-slate-700 mb-1 block">{t('tracks.form_description')}</label>
                    <textarea className={inp} rows={3} value={form.description} onChange={e => setForm(f => ({ ...f, description: e.target.value }))} /></div>
                <div className="grid grid-cols-2 gap-4">
                    <div><label className="text-sm font-medium text-slate-700 mb-1 block">{t('tracks.form_duration')}</label>
                        <input type="number" min={1} required className={inp} value={form.duration} onChange={e => setForm(f => ({ ...f, duration: parseInt(e.target.value) }))} /></div>
                    <div><label className="text-sm font-medium text-slate-700 mb-1 block">{t('tracks.form_language')}</label>
                        <select className={inp} value={form.language} onChange={e => setForm(f => ({ ...f, language: e.target.value }))}>
                            <option value="FR">{t('tracks.form_lang_fr')}</option><option value="WOLOF">{t('tracks.form_lang_wolof')}</option>
                        </select></div>
                </div>
                <label className="flex items-center gap-3 p-3 bg-amber-50 rounded-xl cursor-pointer">
                    <input type="checkbox" checked={form.isPremium} onChange={e => setForm(f => ({ ...f, isPremium: e.target.checked }))} className="w-4 h-4" />
                    <span className="text-sm font-medium text-amber-800">{t('tracks.form_premium')}</span>
                </label>
                {form.isPremium && <div>
                    <label className="text-sm font-medium text-slate-700 mb-1 block">{t('tracks.form_price')}</label>
                    <input type="number" className={inp} value={form.priceAmount} onChange={e => setForm(f => ({ ...f, priceAmount: parseInt(e.target.value) }))} />
                </div>}
                <div className="flex gap-3 pt-2">
                    <button type="button" onClick={() => navigate('/content')} className="flex-1 border border-slate-200 text-slate-600 py-2.5 rounded-xl text-sm hover:bg-slate-50">{t('common.cancel')}</button>
                    <button
                        type="submit"
                        disabled={saving || (isNew && !selectedOrgId)}
                        className="flex-[2] bg-slate-900 text-white py-2.5 rounded-xl text-sm font-bold flex items-center justify-center gap-2 hover:bg-slate-700 disabled:opacity-50"
                    >
                        <Save className="w-4 h-4" />
                        {saving ? t('common.loading') : (!selectedOrgId && isNew ? t('common.select_org') : t('common.save'))}
                    </button>
                </div>
            </form>
        </div>
    );
}