import { useState, useEffect } from 'react'
import { useParams, useNavigate } from 'react-router-dom'

export default function DomainForm({ token, user }) {
  const { id } = useParams()
  const navigate = useNavigate()
  const [d, setD] = useState(null)
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [saved, setSaved] = useState(false)

  useEffect(() => {
    fetch('/api/domains/' + id, { headers: { Authorization: 'Bearer ' + token } })
      .then(r => r.json()).then(data => { setD(data); setLoading(false) })
  }, [id, token])

  const u = (field, val) => { setD(p => ({ ...p, [field]: val })); setSaved(false) }

  const save = async () => {
    setSaving(true)
    const res = await fetch('/api/domains/' + id, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + token },
      body: JSON.stringify(d)
    })
    setD(await res.json())
    setSaving(false)
    setSaved(true)
    setTimeout(() => setSaved(false), 2000)
  }

  const addEmail = () => { const e = JSON.parse(d.email_addresses || '[]'); e.push(''); u('email_addresses', JSON.stringify(e)) }
  const updateEmail = (i, v) => { const e = JSON.parse(d.email_addresses || '[]'); e[i] = v; u('email_addresses', JSON.stringify(e)) }
  const removeEmail = (i) => { const e = JSON.parse(d.email_addresses || '[]'); e.splice(i, 1); u('email_addresses', JSON.stringify(e)); u('email_count', e.length) }
  const addMember = () => { const m = JSON.parse(d.team_members || '[]'); m.push({ first_name: '', last_name: '' }); u('team_members', JSON.stringify(m)) }
  const updateMember = (i, f, v) => { const m = JSON.parse(d.team_members || '[]'); m[i][f] = v; u('team_members', JSON.stringify(m)) }
  const removeMember = (i) => { const m = JSON.parse(d.team_members || '[]'); m.splice(i, 1); u('team_members', JSON.stringify(m)) }

  if (loading) return <div className="text-slate-400 text-center py-12">Chargement...</div>
  if (!d) return <div className="text-red-400 text-center py-12">Domaine non trouve</div>

  const Toggle = ({ checked, onChange, label }) => (
    <div className="flex items-center justify-between py-3">
      <span className="text-slate-300 text-sm">{label}</span>
      <button type="button" onClick={() => onChange(!checked)}
        className={'relative w-11 h-6 rounded-full transition-colors ' + (checked ? 'bg-blue-600' : 'bg-slate-600')}>
        <div className={'absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white transition-transform ' + (checked ? 'translate-x-5' : '')} />
      </button>
    </div>
  )

  const Section = ({ title, color, children }) => (
    <div className="bg-slate-800/40 rounded-2xl border border-slate-700/30 p-6">
      <h3 className={'font-semibold mb-4 ' + color}>{title}</h3>
      {children}
    </div>
  )

  const Input = ({ label, value, onChange, placeholder, type = 'text' }) => (
    <div className="mb-3">
      <label className="block text-slate-400 text-xs mb-1.5">{label}</label>
      <input type={type} value={value || ''} onChange={e => onChange(e.target.value)} placeholder={placeholder}
        className="w-full px-3 py-2.5 bg-slate-900/50 border border-slate-600 rounded-xl text-white text-sm placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" />
    </div>
  )

  return (
    <div>
      <button onClick={() => navigate('/')} className="mb-6 text-slate-400 hover:text-white text-sm flex items-center gap-1 transition">
        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" /></svg>
        Retour
      </button>

      <div className="flex items-center justify-between mb-8">
        <div>
          <h2 className="text-xl font-bold text-white">{d.company_name}</h2>
          <p className="text-slate-400 text-sm">{d.name}</p>
        </div>
        <button onClick={save} disabled={saving}
          className="px-5 py-2.5 bg-blue-600 hover:bg-blue-500 disabled:bg-blue-600/50 text-white text-sm font-medium rounded-xl transition-colors">
          {saving ? 'Sauvegarde...' : saved ? '\u2713 Sauvegarde' : 'Sauvegarder'}
        </button>
      </div>

      <div className="space-y-6">
        <Section title="Cloud" color="text-sky-400">
          <Toggle checked={!!d.has_cloud} onChange={v => u('has_cloud', v ? 1 : 0)} label="Besoin d'un cloud" />
          {d.has_cloud ? (
            <textarea value={d.cloud_details} onChange={e => u('cloud_details', e.target.value)}
              placeholder="Precisez le besoin (espace, usage, type de stockage...)" rows={3}
              className="w-full px-3 py-2.5 bg-slate-900/50 border border-slate-600 rounded-xl text-white text-sm placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none" />
          ) : <p className="text-slate-500 text-xs italic">Aucun besoin cloud renseigne</p>}
        </Section>

        <Section title="Site internet" color="text-violet-400">
          <Toggle checked={!!d.has_website} onChange={v => u('has_website', v ? 1 : 0)} label="Besoin d'un site internet" />
          {d.has_website ? (
            <div className="space-y-3">
              <Toggle checked={!!d.website_wordpress} onChange={v => u('website_wordpress', v ? 1 : 0)} label="WordPress" />
              <div className="mb-3">
                <label className="block text-slate-400 text-xs mb-1.5">Qui gere le site ?</label>
                <select value={d.website_managed_by || ''} onChange={e => u('website_managed_by', e.target.value)}
                  className="w-full px-3 py-2.5 bg-slate-900/50 border border-slate-600 rounded-xl text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                  <option value="">Non precise</option>
                  <option value="charles">L'equipe de Charles</option>
                  <option value="pierre">Pierre (SecourIT)</option>
                </select>
              </div>
              <textarea value={d.website_details} onChange={e => u('website_details', e.target.value)}
                placeholder="Details (nombre de pages, fonctionnalites specifiques...)" rows={3}
                className="w-full px-3 py-2.5 bg-slate-900/50 border border-slate-600 rounded-xl text-white text-sm placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none" />
            </div>
          ) : <p className="text-slate-500 text-xs italic">Aucun site web renseigne</p>}
        </Section>

        <Section title="Adresses mail" color="text-amber-400">
          <Toggle checked={!!d.has_emails} onChange={v => u('has_emails', v ? 1 : 0)} label="Besoin d'adresses mail" />
          {d.has_emails ? (
            <div className="space-y-3">
              <Input label="Nombre d'adresses" type="number" value={d.email_count} onChange={v => u('email_count', parseInt(v) || 0)} placeholder="0" />
              <div>
                <label className="block text-slate-400 text-xs mb-1.5">Adresses mail</label>
                {JSON.parse(d.email_addresses || '[]').map((email, i) => (
                  <div key={i} className="flex gap-2 mb-2">
                    <input type="text" value={email} onChange={e => updateEmail(i, e.target.value)} placeholder="prenom@domaine.fr"
                      className="flex-1 px-3 py-2.5 bg-slate-900/50 border border-slate-600 rounded-xl text-white text-sm placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" />
                    <button onClick={() => removeEmail(i)} className="p-2.5 text-red-400 hover:bg-red-500/10 rounded-xl transition">
                      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
                    </button>
                  </div>
                ))}
                <button onClick={addEmail} className="text-blue-400 hover:text-blue-300 text-xs flex items-center gap-1 transition">
                  <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" /></svg>
                  Ajouter une adresse
                </button>
              </div>
            </div>
          ) : <p className="text-slate-500 text-xs italic">Aucune adresse mail renseignee</p>}
        </Section>

        <Section title="Utilisateurs" color="text-emerald-400">
          <Toggle checked={!!d.has_team} onChange={v => u('has_team', v ? 1 : 0)} label="Besoin d'utilisateurs" />
          {d.has_team ? (
            <div className="space-y-3">
              {JSON.parse(d.team_members || '[]').map((m, i) => (
                <div key={i} className="flex gap-2">
                  <input type="text" value={m.first_name} onChange={e => updateMember(i, 'first_name', e.target.value)} placeholder="Prenom"
                    className="flex-1 px-3 py-2.5 bg-slate-900/50 border border-slate-600 rounded-xl text-white text-sm placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" />
                  <input type="text" value={m.last_name} onChange={e => updateMember(i, 'last_name', e.target.value)} placeholder="Nom"
                    className="flex-1 px-3 py-2.5 bg-slate-900/50 border border-slate-600 rounded-xl text-white text-sm placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" />
                  <button onClick={() => removeMember(i)} className="p-2.5 text-red-400 hover:bg-red-500/10 rounded-xl transition">
                    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
                  </button>
                </div>
              ))}
              <button onClick={addMember} className="text-blue-400 hover:text-blue-300 text-xs flex items-center gap-1 transition">
                <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" /></svg>
                Ajouter un utilisateur
              </button>
            </div>
          ) : <p className="text-slate-500 text-xs italic">Aucun utilisateur renseigne</p>}
        </Section>

        {user.role === 'admin' && (
          <Section title="Tarif mensuel" color="text-emerald-400">
            <Input label="Prix mensuel (EUR)" type="number" value={d.monthly_price} onChange={v => u('monthly_price', parseFloat(v) || 0)} placeholder="0" />
          </Section>
        )}

        <Section title="Notes" color="text-slate-400">
          <textarea value={d.notes} onChange={e => u('notes', e.target.value)} placeholder="Notes additionnelles..." rows={4}
            className="w-full px-3 py-2.5 bg-slate-900/50 border border-slate-600 rounded-xl text-white text-sm placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none" />
        </Section>
      </div>
    </div>
  )
}