// /opt/erp-system/app/settings/page.tsx
'use client';

import { useState, useEffect } from 'react';
import { Settings, Save, Percent, Euro, Mail, Inbox, Hash } from 'lucide-react';

export default function SettingsPage() {
  const [data, setData] = useState({ 
    hourlyRate: 0, taxRate: 0, companyName: '', companyInfo: '',
    smtpHost: '', smtpPort: 587, smtpUser: '', smtpPass: '', smtpFrom: '', hasSmtpPass: false,
    imapHost: '', imapPort: 993, imapUser: '', imapPass: '', hasImapPass: false,
    nextQuoteNumber: 1, nextOrderNumber: 1, nextDeliveryNumber: 1, nextInvoiceNumber: 1, nextCreditNoteNumber: 1,
    defaultQuoteValidityDays: 14
  });
  
  const [loading, setLoading] = useState(true);
  const [msg, setMsg] = useState('');

  useEffect(() => {
    fetch('/api/settings').then(res => res.json()).then(d => {
      setData({
        hourlyRate: d.hourlyRate || 0, taxRate: d.taxRate || 0, companyName: d.companyName || '', companyInfo: d.companyInfo || '',
        smtpHost: d.smtpHost || '', smtpPort: d.smtpPort || 587, smtpUser: d.smtpUser || '', smtpPass: '', smtpFrom: d.smtpFrom || '', hasSmtpPass: d.hasSmtpPass,
        imapHost: d.imapHost || '', imapPort: d.imapPort || 993, imapUser: d.imapUser || '', imapPass: '', hasImapPass: d.hasImapPass,
        nextQuoteNumber: d.nextQuoteNumber || 1, nextOrderNumber: d.nextOrderNumber || 1, nextDeliveryNumber: d.nextDeliveryNumber || 1, nextInvoiceNumber: d.nextInvoiceNumber || 1, nextCreditNoteNumber: d.nextCreditNoteNumber || 1,
        defaultQuoteValidityDays: d.defaultQuoteValidityDays || 14
      });
      setLoading(false);
    });
  }, []);

  const handleSave = async (e: React.FormEvent) => {
    e.preventDefault();
    const res = await fetch('/api/settings', {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data)
    });
    if (res.ok) {
      setMsg('Einstellungen erfolgreich gespeichert.');
      setTimeout(() => setMsg(''), 3000);
      setData(prev => ({ 
        ...prev, 
        smtpPass: '', hasSmtpPass: prev.smtpPass ? true : prev.hasSmtpPass,
        imapPass: '', hasImapPass: prev.imapPass ? true : prev.hasImapPass 
      }));
    }
  };

  if (loading) return <div className="p-8">Lade Konfiguration...</div>;

  return (
    <div className="max-w-4xl mx-auto space-y-6 pb-12">
      <h1 className="text-2xl font-bold text-slate-900 flex items-center gap-2">
        <Settings className="w-6 h-6 text-indigo-600" /> Systemeinstellungen
      </h1>

      {msg && <div className="p-4 bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-lg font-medium">{msg}</div>}

      <form onSubmit={handleSave} className="bg-white rounded-xl shadow-sm border border-slate-200 divide-y divide-slate-100">
        
        {/* Abrechnung */}
        <div className="p-6 space-y-4">
          <h2 className="font-semibold text-slate-800">Abrechnungsparameter</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1 flex items-center gap-2">
                <Euro className="w-4 h-4" /> Standard-Stundensatz
              </label>
              <input type="number" step="0.01" className="w-full border border-slate-300 p-2.5 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none" value={data.hourlyRate} onChange={e => setData({...data, hourlyRate: parseFloat(e.target.value)})} />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1 flex items-center gap-2">
                <Percent className="w-4 h-4" /> Mehrwertsteuer (%)
              </label>
              <input type="number" step="0.1" className="w-full border border-slate-300 p-2.5 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none" value={data.taxRate} onChange={e => setData({...data, taxRate: parseFloat(e.target.value)})} />
            </div>
          </div>
        </div>

        {/* SMTP */}
        <div className="p-6 space-y-4">
          <h2 className="font-semibold text-slate-800 flex items-center gap-2">
            <Mail className="w-5 h-5" /> Ausgehende E-Mails (SMTP)
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div className="md:col-span-3">
              <label className="block text-sm font-medium text-slate-700 mb-1">SMTP Server (Host)</label>
              <input type="text" className="w-full border border-slate-300 p-2.5 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none" value={data.smtpHost} onChange={e => setData({...data, smtpHost: e.target.value})} />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Port</label>
              <input type="number" className="w-full border border-slate-300 p-2.5 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none" value={data.smtpPort} onChange={e => setData({...data, smtpPort: parseInt(e.target.value)})} />
            </div>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">SMTP Benutzername</label>
              <input type="text" className="w-full border border-slate-300 p-2.5 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none" value={data.smtpUser} onChange={e => setData({...data, smtpUser: e.target.value})} />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">SMTP Passwort</label>
              <input type="password" placeholder={data.hasSmtpPass ? "****** (Gespeichert)" : "Passwort eingeben"} className="w-full border border-slate-300 p-2.5 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none" value={data.smtpPass} onChange={e => setData({...data, smtpPass: e.target.value})} />
            </div>
          </div>
        </div>

        {/* IMAP */}
        <div className="p-6 space-y-4">
          <h2 className="font-semibold text-slate-800 flex items-center gap-2">
            <Inbox className="w-5 h-5" /> Eingehende E-Mails (IMAP)
          </h2>
          <p className="text-sm text-slate-500">Diese E-Mail-Adresse wird überwacht, um automatisch Tickets aus eingehenden E-Mails zu erstellen.</p>
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div className="md:col-span-3">
              <label className="block text-sm font-medium text-slate-700 mb-1">IMAP Server (Host)</label>
              <input type="text" placeholder="z.B. imap.strato.de" className="w-full border border-slate-300 p-2.5 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none" value={data.imapHost} onChange={e => setData({...data, imapHost: e.target.value})} />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Port</label>
              <input type="number" placeholder="993" className="w-full border border-slate-300 p-2.5 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none" value={data.imapPort} onChange={e => setData({...data, imapPort: parseInt(e.target.value)})} />
            </div>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">IMAP Benutzername</label>
              <input type="text" placeholder="z.B. support@deine-firma.de" className="w-full border border-slate-300 p-2.5 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none" value={data.imapUser} onChange={e => setData({...data, imapUser: e.target.value})} />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">IMAP Passwort</label>
              <input type="password" placeholder={data.hasImapPass ? "****** (Gespeichert)" : "Passwort eingeben"} className="w-full border border-slate-300 p-2.5 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none" value={data.imapPass} onChange={e => setData({...data, imapPass: e.target.value})} />
            </div>
          </div>
        </div>

        {/* Nummernkreise */}
        <div className="p-6 space-y-4">
          <h2 className="font-semibold text-slate-800 flex items-center gap-2"><Hash className="w-4 h-4 text-indigo-600" /> Nummernkreise (Warenwirtschaft)</h2>
          <p className="text-sm text-slate-500">Laufende Nummern für Belege. Format: <span className="font-mono bg-slate-100 px-1 rounded">ANG-{new Date().getFullYear()}-{data.nextQuoteNumber.toString().padStart(4, '0')}</span></p>
          <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Angebot (ANG)</label>
              <input type="number" min="1" className="w-full border border-slate-300 p-2.5 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none" value={data.nextQuoteNumber} onChange={e => setData({...data, nextQuoteNumber: parseInt(e.target.value) || 1})} />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">AB</label>
              <input type="number" min="1" className="w-full border border-slate-300 p-2.5 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none" value={data.nextOrderNumber} onChange={e => setData({...data, nextOrderNumber: parseInt(e.target.value) || 1})} />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Lieferschein (LS)</label>
              <input type="number" min="1" className="w-full border border-slate-300 p-2.5 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none" value={data.nextDeliveryNumber} onChange={e => setData({...data, nextDeliveryNumber: parseInt(e.target.value) || 1})} />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Rechnung (RE)</label>
              <input type="number" min="1" className="w-full border border-slate-300 p-2.5 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none" value={data.nextInvoiceNumber} onChange={e => setData({...data, nextInvoiceNumber: parseInt(e.target.value) || 1})} />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Korrektur (RK)</label>
              <input type="number" min="1" className="w-full border border-slate-300 p-2.5 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none" value={data.nextCreditNoteNumber} onChange={e => setData({...data, nextCreditNoteNumber: parseInt(e.target.value) || 1})} />
            </div>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-5 gap-4 mt-2">
            <div className="col-span-2">
              <label className="block text-sm font-medium text-slate-700 mb-1">Standard-Gültigkeit Angebot (Tage)</label>
              <input type="number" min="1" className="w-full border border-slate-300 p-2.5 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none" value={data.defaultQuoteValidityDays} onChange={e => setData({...data, defaultQuoteValidityDays: parseInt(e.target.value) || 14})} />
            </div>
          </div>
        </div>

        <div className="p-6 bg-slate-50 flex justify-end">
          <button type="submit" className="bg-indigo-600 text-white px-6 py-2.5 rounded-lg hover:bg-indigo-700 transition flex items-center gap-2 font-bold shadow-sm">
            <Save className="w-4 h-4" /> Alle Einstellungen speichern
          </button>
        </div>
      </form>
    </div>
  );
}