'use client';

import { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Loader2, Building2, MapPin, Receipt, Save } from 'lucide-react';
import { createClient } from '@/lib/supabase/client';
import { getBrandingSettings, saveBrandingSettings } from '@/lib/actions/branding';
import type { BrandingSettings } from '@/lib/constants/branding';
import { useRouter } from 'next/navigation';

export default function FirmendatenPage() {
  const [loading, setLoading] = useState(true);
  const [branding, setBranding] = useState<BrandingSettings>({
    companyName: '',
    street: '',
    zip: '',
    city: '',
    billingStreet: '',
    billingZip: '',
    billingCity: '',
    sameBillingAddress: true,
    colorScheme: 'modern_blue',
    primaryColor: '#2563eb',
    accentColor: '#38bdf8',
  });
  const [saving, setSaving] = useState(false);
  const [msg, setMsg] = useState('');
  const [msgType, setMsgType] = useState<'success' | 'error' | ''>('');
  const router = useRouter();

  useEffect(() => {
    async function loadData() {
      try {
        const supabase = createClient();
        const { data: { user } } = await supabase.auth.getUser();
        if (!user) {
          router.push('/auth/login');
          return;
        }
        const brandRes = await getBrandingSettings();
        if (brandRes) setBranding(brandRes);
      } catch (e) {
        console.error(e);
      } finally {
        setLoading(false);
      }
    }
    loadData();
  }, [router]);

  const handleSave = async () => {
    setSaving(true);
    setMsg('');
    try {
      const res = await saveBrandingSettings(branding);
      if (res.success) {
        setMsgType('success');
        setMsg('Firmendaten erfolgreich gespeichert.');
      } else {
        setMsgType('error');
        setMsg(res.error || 'Fehler beim Speichern.');
      }
    } catch (err: any) {
      setMsgType('error');
      setMsg(err.message || 'Fehler beim Speichern.');
    } finally {
      setSaving(false);
    }
  };

  if (loading) {
    return <div className="p-8 text-white flex justify-center items-center"><Loader2 className="w-8 h-8 animate-spin text-primary" /></div>;
  }

  return (
    <div className="p-6 max-w-5xl mx-auto space-y-6">
      <div>
        <h1 className="text-3xl font-extrabold tracking-tight text-white flex items-center gap-3">
          <Building2 className="w-8 h-8 text-blue-400" />
          Firmendaten & Anschrift
        </h1>
        <p className="text-slate-400 text-xs mt-1">
          Verwaltung der eigenen Unternehmensanschrift für Rechnungen, Dokumente und Footereinträge.
        </p>
      </div>

      {msg && (
        <div className={`p-3.5 rounded-xl text-xs font-medium border ${msgType === 'success' ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400' : 'bg-destructive/10 border-destructive/20 text-destructive'
          }`}>
          {msg}
        </div>
      )}

      <div className="p-6 rounded-2xl bg-slate-900/60 border border-slate-800 space-y-5">
        <div className="grid md:grid-cols-2 gap-4">
          <div className="space-y-1.5">
            <Label className="text-xs font-bold text-slate-300">Firmenname *</Label>
            <Input
              value={branding.companyName}
              onChange={(e) => setBranding({ ...branding, companyName: e.target.value })}
              placeholder="z. B. Meine Firma GmbH"
              className="bg-slate-950/80 border-slate-800 text-white text-sm"
            />
          </div>

          <div className="space-y-1.5">
            <Label className="text-xs font-bold text-slate-300">Logo-URL (Optional)</Label>
            <Input
              value={branding.logoUrl || ''}
              onChange={(e) => setBranding({ ...branding, logoUrl: e.target.value })}
              placeholder="https://domain.de/logo.png oder /assets/logo.png"
              className="bg-slate-950/80 border-slate-800 text-white text-sm"
            />
          </div>
        </div>

        <div className="space-y-1.5">
          <Label className="text-xs font-bold text-slate-300">Entwickler / Subline Beschriftung (Footer & Header)</Label>
          <Input
            value={branding.developerFooter || ''}
            onChange={(e) => setBranding({ ...branding, developerFooter: e.target.value })}
            placeholder="CASPOS Shop"
            className="bg-slate-950/80 border-slate-800 text-white text-sm"
          />
        </div>

        <div className="grid md:grid-cols-2 gap-4 pt-3 border-t border-slate-800">
          <div className="space-y-3">
            <span className="text-xs font-bold text-slate-300 flex items-center gap-1.5">
              <MapPin className="w-3.5 h-3.5 text-blue-400" /> Hauptanschrift
            </span>
            <div className="space-y-1.5">
              <Label className="text-xs text-slate-400">Straße &amp; Nr.</Label>
              <Input
                value={branding.street}
                onChange={(e) => setBranding({ ...branding, street: e.target.value })}
                placeholder="Musterstraße 12"
                className="bg-slate-950/80 border-slate-800 text-white text-xs"
              />
            </div>
            <div className="grid grid-cols-3 gap-2">
              <div>
                <Label className="text-xs text-slate-400">PLZ</Label>
                <Input
                  value={branding.zip}
                  onChange={(e) => setBranding({ ...branding, zip: e.target.value })}
                  placeholder="12345"
                  className="bg-slate-950/80 border-slate-800 text-white text-xs"
                />
              </div>
              <div className="col-span-2">
                <Label className="text-xs text-slate-400">Ort</Label>
                <Input
                  value={branding.city}
                  onChange={(e) => setBranding({ ...branding, city: e.target.value })}
                  placeholder="Musterstadt"
                  className="bg-slate-950/80 border-slate-800 text-white text-xs"
                />
              </div>
            </div>
          </div>

          <div className="space-y-3">
            <div className="flex items-center justify-between">
              <span className="text-xs font-bold text-slate-300 flex items-center gap-1.5">
                <Receipt className="w-3.5 h-3.5 text-blue-400" /> Rechnungsadresse
              </span>
              <label className="flex items-center gap-1.5 text-xs text-slate-400 cursor-pointer">
                <input
                  type="checkbox"
                  checked={branding.sameBillingAddress}
                  onChange={(e) => setBranding({ ...branding, sameBillingAddress: e.target.checked })}
                  className="w-3.5 h-3.5 rounded border-slate-700 bg-slate-950 text-blue-500"
                />
                Gleiche wie Hauptanschrift
              </label>
            </div>

            {!branding.sameBillingAddress ? (
              <div className="space-y-3 p-3 rounded-xl bg-slate-950/40 border border-slate-800">
                <div className="space-y-1.5">
                  <Label className="text-xs text-slate-400">Rechnungsstraße &amp; Nr.</Label>
                  <Input
                    value={branding.billingStreet}
                    onChange={(e) => setBranding({ ...branding, billingStreet: e.target.value })}
                    placeholder="Rechnungsstraße 45"
                    className="bg-slate-950/80 border-slate-800 text-white text-xs"
                  />
                </div>
                <div className="grid grid-cols-3 gap-2">
                  <div>
                    <Label className="text-xs text-slate-400">PLZ</Label>
                    <Input
                      value={branding.billingZip}
                      onChange={(e) => setBranding({ ...branding, billingZip: e.target.value })}
                      placeholder="54321"
                      className="bg-slate-950/80 border-slate-800 text-white text-xs"
                    />
                  </div>
                  <div className="col-span-2">
                    <Label className="text-xs text-slate-400">Ort</Label>
                    <Input
                      value={branding.billingCity}
                      onChange={(e) => setBranding({ ...branding, billingCity: e.target.value })}
                      placeholder="Rechnungsstadt"
                      className="bg-slate-950/80 border-slate-800 text-white text-xs"
                    />
                  </div>
                </div>
              </div>
            ) : (
              <div className="p-3 rounded-xl bg-slate-950/40 border border-slate-800/60 text-xs text-slate-500 italic">
                Verwendet automatisch die Hauptanschrift oben.
              </div>
            )}
          </div>
        </div>

        <div className="flex justify-end pt-4 border-t border-slate-800">
          <Button onClick={handleSave} disabled={saving} className="bg-blue-600 hover:bg-blue-500 text-white rounded-xl px-6 h-10 text-xs font-bold">
            {saving ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Save className="w-4 h-4 mr-2" />}
            Speichern
          </Button>
        </div>
      </div>
    </div>
  );
}