'use client';

import { useEffect, useRef, useState } from 'react';

interface FahrkostenRow {
  ID: number;
  Kuerzel: string;
  Name: string;
  Km: number;
  Anzahl: number;
}

const SATZ = Number(process.env.NEXT_PUBLIC_FAHRKOSTEN_SATZ ?? 15);
// Der in der DB gespeicherte km-Wert gilt für die einfache Fahrt — für Hin- und Rückfahrt verdoppeln.
const FAHRTEN_PRO_TERMIN = 2;

function defaultAb(): string {
  const d = new Date();
  return `${d.getFullYear()}-01-01`;
}

function defaultBis(): string {
  const d = new Date();
  const mm = String(d.getMonth() + 1).padStart(2, '0');
  const dd = String(d.getDate()).padStart(2, '0');
  return `${d.getFullYear()}-${mm}-${dd}`;
}

export default function Fahrkosten() {
  const [ab, setAb] = useState(defaultAb);
  // Leeres `bis` bedeutet „bis heute“ — das Backend setzt dann den heutigen Tag ein.
  const [bis, setBis] = useState('');
  const [data, setData] = useState<{ ab: string; bis: string; rows: FahrkostenRow[] } | null>(null);
  const [errorKey, setErrorKey] = useState<string | null>(null);
  const bisRef = useRef<HTMLInputElement>(null);

  const key = `${ab}|${bis}`;

  useEffect(() => {
    let cancelled = false;
    fetch(`/api/fahrkosten?ab=${ab}${bis ? `&bis=${bis}` : ''}`)
      .then((r) => { if (!r.ok) throw new Error(); return r.json(); })
      .then((d: FahrkostenRow[]) => { if (!cancelled) setData({ ab, bis, rows: d }); })
      .catch(() => { if (!cancelled) setErrorKey(key); });
    return () => { cancelled = true; };
  }, [ab, bis, key]);

  // Derive status from state tagged with the `ab|bis` it belongs to, so that
  // changing the range shows the loading state without a synchronous setState.
  const rows = data && data.ab === ab && data.bis === bis ? data.rows : null;
  const error = errorKey === key;
  const loading = !rows && !error;

  const gesamt = rows ? rows.reduce((s, r) => s + r.Anzahl * SATZ, 0) : 0;
  const gesamtKm = rows ? rows.reduce((s, r) => s + r.Anzahl * r.Km * FAHRTEN_PRO_TERMIN, 0) : 0;

  const thCls = 'px-3 py-2 border border-gray-300 text-xs font-semibold bg-gray-100 text-left whitespace-nowrap text-gray-900';
  const thNarrowCls = `${thCls} w-16`;
  const tdCls = 'px-3 py-2 border border-gray-200 text-sm text-gray-900';
  const tdNarrowCls = `${tdCls} w-16`;
  const tdNumCls = 'px-3 py-2 border border-gray-200 text-sm text-right tabular-nums w-20 text-gray-900';
  const tdKmCls = 'px-3 py-2 border border-gray-200 text-sm text-right tabular-nums w-28 whitespace-nowrap text-gray-900';

  const abFormatted = new Date(ab + 'T00:00:00').toLocaleDateString('de-DE', {
    day: '2-digit', month: '2-digit', year: 'numeric',
  });
  const bisFormatted = new Date((bis || defaultBis()) + 'T00:00:00').toLocaleDateString('de-DE', {
    day: '2-digit', month: '2-digit', year: 'numeric',
  });

  return (
    <div className="space-y-4 print:pl-[1.5cm]">
      <div className="flex flex-wrap items-center gap-x-3 gap-y-2 print:hidden">
        <label className="text-sm font-medium text-gray-700 whitespace-nowrap">Ab Datum</label>
        <input
          type="date"
          value={ab}
          onChange={(e) => setAb(e.target.value)}
          className="px-2 py-1 border-2 border-gray-400 rounded-lg bg-white text-gray-900 text-sm focus:border-blue-500 focus:outline-none"
        />
        <label className="text-sm font-medium text-gray-700 whitespace-nowrap">Bis Datum</label>
        <div className="relative">
          <input
            ref={bisRef}
            type="date"
            value={bis}
            onChange={(e) => setBis(e.target.value)}
            className="px-2 py-1 border-2 border-gray-400 rounded-lg bg-white text-gray-900 text-sm focus:border-blue-500 focus:outline-none"
          />
          {!bis && (
            <button
              type="button"
              onClick={() => bisRef.current?.showPicker?.()}
              className="absolute inset-0.5 flex items-center rounded-md bg-white pl-2 text-left text-sm text-gray-900"
            >
              heute
            </button>
          )}
        </div>
      </div>

      {/* Druckkopf */}
      <div className="hidden print:block mb-2">
        <div className="text-lg font-bold">Sternwarte Welzheim — Fahrkostenabrechnung</div>
        <div className="text-sm text-gray-600">Führungen von <strong>{abFormatted}</strong> bis <strong>{bisFormatted}</strong> · {SATZ} € pro Führung</div>
        <div className="text-xs text-gray-400 mt-0.5">Ausdruck vom {new Date().toLocaleDateString('de-DE')}</div>
      </div>

      {loading && <div className="text-gray-500 text-sm py-4">Lade...</div>}
      {error && <div className="text-red-600 text-sm py-4">Fehler beim Laden.</div>}

      {!loading && !error && rows && (
        <>
          {rows.length === 0 ? (
            <div className="text-gray-500 text-sm py-4">Keine Führungen in diesem Zeitraum gefunden.</div>
          ) : (
            <div className="overflow-x-auto">
              <table className="w-full border-collapse text-sm">
                <thead>
                  <tr>
                    <th className={thCls}>Name</th>
                    <th className={thNarrowCls}>Kürzel</th>
                    <th className={`${thNarrowCls} text-right`}>Fahrten</th>
                    <th className={`${thCls} text-right`}>Fahrkosten</th>
                    <th className={`${thCls} text-right`}>Kilometer</th>
                  </tr>
                </thead>
                <tbody>
                  {rows.map((r) => (
                    <tr key={r.ID} className="hover:bg-gray-50 print:hover:bg-transparent">
                      <td className={tdCls}>{r.Name}</td>
                      <td className={tdNarrowCls}>{r.Kuerzel}</td>
                      <td className={tdNumCls}>{r.Anzahl}</td>
                      <td className={tdNumCls}>{(r.Anzahl * SATZ).toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })}</td>
                      <td className={tdKmCls}>{(r.Anzahl * r.Km * FAHRTEN_PRO_TERMIN).toLocaleString('de-DE')} km</td>
                    </tr>
                  ))}
                </tbody>
                <tfoot>
                  <tr className="bg-gray-100 font-semibold">
                    <td className={`${tdCls} font-semibold`} colSpan={2}>Gesamt</td>
                    <td className={`${tdNumCls} font-semibold`}>{rows.reduce((s, r) => s + r.Anzahl, 0)}</td>
                    <td className={`${tdNumCls} font-semibold`}>{gesamt.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })}</td>
                    <td className={`${tdKmCls} font-semibold`}>{gesamtKm.toLocaleString('de-DE')} km</td>
                  </tr>
                </tfoot>
              </table>
            </div>
          )}
        </>
      )}
    </div>
  );
}