import { useState } from 'react'
import { format, subDays } from 'date-fns'
import { FaFileExport, FaChartBar } from 'react-icons/fa6'
import { PageHeader, Card, Button, Field, EmptyState } from '../components/ui'

export default function ReportsPage() {
  const [dateRange, setDateRange] = useState({
    from: format(subDays(new Date(), 30), 'yyyy-MM-dd'),
    to: format(new Date(), 'yyyy-MM-dd'),
  })
  const [reportType, setReportType] = useState('tickets')

  const reportTypes = [
    { value: 'tickets', label: 'Ticket-Uebersicht' },
    { value: 'performance', label: 'Leistungsbericht' },
    { value: 'customer', label: 'Kundenbericht' },
    { value: 'technician', label: 'Techniker-Bericht' },
  ]

  const handleGenerate = () => {
    alert(`Bericht "${reportType}" von ${dateRange.from} bis ${dateRange.to}`)
  }

  return (
    <div className="page">
      <PageHeader title="Reports" subtitle="Auswertungen und Exporte" />

      <Card title="Bericht erstellen">
        <div className="flex gap-3 wrap">
          <Field label="Berichtstyp">
            <select className="form-control" value={reportType} onChange={(e) => setReportType(e.target.value)}>
              {reportTypes.map((t) => <option key={t.value} value={t.value}>{t.label}</option>)}
            </select>
          </Field>
          <Field label="Von"><input className="form-control" type="date" value={dateRange.from} onChange={(e) => setDateRange((p) => ({ ...p, from: e.target.value }))} /></Field>
          <Field label="Bis"><input className="form-control" type="date" value={dateRange.to} onChange={(e) => setDateRange((p) => ({ ...p, to: e.target.value }))} /></Field>
        </div>
        <div className="flex gap-2" style={{ marginTop: 8 }}>
          <Button variant="primary" onClick={handleGenerate}><FaChartBar /> Bericht erstellen</Button>
          <Button variant="ghost"><FaFileExport /> Als PDF exportieren</Button>
        </div>
      </Card>

      <div style={{ marginTop: 16 }}>
        <Card><EmptyState icon={<FaChartBar />} title="Noch kein Bericht" hint="Parameter waehlen und Bericht erstellen." /></Card>
      </div>
    </div>
  )
}
