'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'
import Link from 'next/link'
import { ArrowLeft, UserPlus, Loader2 } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { createEndCustomer } from '@/lib/actions/end-customers'

export default function NewCustomerPage() {
  const router = useRouter()
  const [saving, setSaving] = useState(false)
  const [form, setForm] = useState({
    company_name: '', vat_id: '', first_name: '', last_name: '', street: '', zip: '', city: '', email: '',
    bank_iban: '', bank_bic: '', bank_name: '', bank_owner: '',
  })

  const handleSave = async () => {
    if (!form.company_name.trim()) return
    setSaving(true)
    try {
      await createEndCustomer(form)
      router.push('/my-customers')
    } catch (e) {
      alert('Fehler beim Anlegen des Kunden.')
      setSaving(false)
    }
  }

  return (
    <div className="min-h-screen bg-[#020617] text-white px-4 py-12">
      <div className="max-w-2xl mx-auto space-y-6">
        <div className="flex items-center gap-4">
          <Link href="/my-customers">
            <Button variant="ghost" size="sm" className="text-slate-400 hover:text-white">
              <ArrowLeft className="w-4 h-4 mr-2" /> Zurück
            </Button>
          </Link>
          <h1 className="text-2xl font-extrabold tracking-tight flex items-center gap-2">
            <UserPlus className="w-6 h-6 text-primary" />
            Neuen Endkunden anlegen
          </h1>
        </div>

        <Card className="glass-dark border-white/10">
          <CardHeader>
            <CardTitle className="text-white">Stammdaten</CardTitle>
            <CardDescription className="text-slate-400">
              Legen Sie einen neuen Endkunden an. Diese Daten stehen sofort im Bestellwizard zur Auswahl.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid md:grid-cols-2 gap-4">
              {([
                { label: 'Firmenname *', key: 'company_name', span: true, placeholder: 'GmbH / KG / Einzelunternehmen' },
                { label: 'USt-IdNr.', key: 'vat_id', span: false, placeholder: 'DE123456789' },
                { label: 'Vorname', key: 'first_name', span: false, placeholder: '' },
                { label: 'Nachname', key: 'last_name', span: false, placeholder: '' },
                { label: 'E-Mail', key: 'email', span: true, placeholder: 'kunde@beispiel.de' },
                { label: 'Straße & Hausnummer', key: 'street', span: true, placeholder: 'Musterstraße 1' },
                { label: 'PLZ', key: 'zip', span: false, placeholder: '12345' },
                { label: 'Ort', key: 'city', span: false, placeholder: 'Musterstadt' },
                { label: 'Kontoinhaber', key: 'bank_owner', span: false, placeholder: 'Max Mustermann' },
                { label: 'IBAN', key: 'bank_iban', span: false, placeholder: 'DE89370400440532013000' },
                { label: 'BIC', key: 'bank_bic', span: false, placeholder: 'SOLADE21XXX' },
                { label: 'Bankname', key: 'bank_name', span: false, placeholder: 'Musterbank' },
              ] as const).map(({ label, key, span, placeholder }) => (
                <div key={key} className={`space-y-1.5 ${span ? 'md:col-span-2' : ''}`}>
                  <Label className="text-slate-300 text-sm">{label}</Label>
                  <Input
                    value={form[key]}
                    onChange={e => setForm(prev => ({ ...prev, [key]: e.target.value }))}
                    placeholder={placeholder}
                    className="bg-white/5 border-white/10 text-white placeholder:text-slate-500"
                  />
                </div>
              ))}
            </div>
            <div className="flex gap-3 pt-2">
              <Button
                onClick={handleSave}
                disabled={saving || !form.company_name.trim()}
                className="gap-2"
              >
                {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <UserPlus className="w-4 h-4" />}
                Kunden anlegen
              </Button>
              <Link href="/my-customers">
                <Button variant="ghost">Abbrechen</Button>
              </Link>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}