logbuch/components/LogbuchForm.tsx

'use client';

import { useEffect, useState } from 'react';
import type { Kuppel, ArtFuehrung, BeoOption, SelectedObjekt, Wetter, LogbuchEintrag } from '@/types/logbuch';
import { ARTEN } from '@/types/logbuch';
import BeoSelector from './BeoSelector';
import ObjektSelector from './ObjektSelector';
import CustomSelect from './CustomSelect';

interface Props {
  kuppel: Kuppel;
  currentUserBeo: BeoOption;
  editEntry?: LogbuchEintrag | null;
  onSaved: () => void;
}

function toLocalDatetimeValue(isoOrDatetime: string): string {
  if (!isoOrDatetime) return '';
  return isoOrDatetime.slice(0, 16);
}

function nowLocalDatetime(): string {
  const now = new Date();
  const pad = (n: number) => String(n).padStart(2, '0');
  return `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}T${pad(now.getHours())}:${pad(now.getMinutes())}`;
}

const NO_OBJEKTE_ARTEN: ArtFuehrung[] = ['BEO-Sitzung', 'Technischer Dienst'];
const SONNE_ART: ArtFuehrung = 'Sonnenführung';

export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved }: Props) {
  const [artFuehrung, setArtFuehrung] = useState<ArtFuehrung>('Reguläre Führung');
  const [beginn, setBeginn] = useState(nowLocalDatetime());
  const [ende, setEnde] = useState(nowLocalDatetime());
  const [besucher, setBesucher] = useState(0);
  const [beos, setBeos] = useState<BeoOption[]>([currentUserBeo]);
  const [objekte, setObjekte] = useState<SelectedObjekt[]>([]);
  const [bemerkungen, setBemerkungen] = useState('');
  const [wetter, setWetter] = useState<Wetter | null>(null);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState('');
  const [success, setSuccess] = useState(false);

  const showObjekte = !NO_OBJEKTE_ARTEN.includes(artFuehrung);
  const showBesucher = !NO_OBJEKTE_ARTEN.includes(artFuehrung);
  const isSonne = artFuehrung === SONNE_ART;

  useEffect(() => {
    fetch('/api/wetter')
      .then((r) => { if (!r.ok) throw new Error(); return r.json(); })
      .then(setWetter)
      .catch(() => {});
  }, []);

  useEffect(() => {
    if (editEntry) {
      setArtFuehrung(editEntry.ArtFuehrung);
      setBeginn(toLocalDatetimeValue(editEntry.Beginn));
      setEnde(toLocalDatetimeValue(editEntry.Ende));
      setBesucher(editEntry.Besucher);
      setBemerkungen(editEntry.Bemerkungen ?? '');
      if (editEntry.WetterTemp !== null) {
        setWetter({
          temp: editEntry.WetterTemp ?? 0,
          feuchte: editEntry.WetterFeuchte ?? 0,
          druck: editEntry.WetterDruck ?? 0,
        });
      }
    } else {
      setArtFuehrung('Reguläre Führung');
      setBeginn(nowLocalDatetime());
      setEnde(nowLocalDatetime());
      setBesucher(0);
      setBeos([currentUserBeo]);
      setObjekte([]);
      setBemerkungen('');
    }
  }, [editEntry, currentUserBeo]);

  useEffect(() => {
    if (editEntry && editEntry.BEOs) {
      fetch('/api/beos')
        .then((r) => r.json())
        .then((all: BeoOption[]) => {
          const kuerzel = editEntry.BEOs.split(', ').map((k) => k.trim());
          setBeos(all.filter((b) => kuerzel.includes(b.Kuerzel)));
        })
        .catch(() => {});
    }
    if (editEntry && editEntry.Objekte) {
      const names = editEntry.Objekte.split(', ').map((n) => n.trim());
      fetch('/api/objekte')
        .then((r) => r.json())
        .then((all: { ID: number; Name: string }[]) => {
          const result: SelectedObjekt[] = names.map((name) => {
            const found = all.find((o) => o.Name === name);
            return { ID: found?.ID ?? null, Name: name };
          });
          setObjekte(result);
        })
        .catch(() => {});
    }
  }, [editEntry]);

  // Objekte-Vorauswahl je nach Art der Führung
  useEffect(() => {
    if (artFuehrung === SONNE_ART) {
      setObjekte([{ ID: null, Name: 'Sonne' }]);
    } else if (NO_OBJEKTE_ARTEN.includes(artFuehrung)) {
      setObjekte([]);
    }
  }, [artFuehrung]);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setSaving(true);
    setError('');
    setSuccess(false);

    const body = {
      Kuppel: kuppel,
      ArtFuehrung: artFuehrung,
      Beginn: beginn,
      Ende: ende,
      Besucher: besucher,
      beoIds: beos.map((b) => b.ID),
      objekte: showObjekte ? objekte : [],
      Bemerkungen: bemerkungen,
      Wetter: wetter,
    };

    const url = editEntry ? `/api/logbuch/${editEntry.ID}` : '/api/logbuch';
    const method = editEntry ? 'PUT' : 'POST';

    try {
      const res = await fetch(url, {
        method,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body),
      });
      if (!res.ok) throw new Error(await res.text());
      setSuccess(true);
      if (!editEntry) {
        setBeginn(nowLocalDatetime());
        setEnde(nowLocalDatetime());
        setBesucher(0);
        setBeos([currentUserBeo]);
        setObjekte([]);
        setBemerkungen('');
      }
      onSaved();
    } catch {
      setError('Fehler beim Speichern. Bitte erneut versuchen.');
    } finally {
      setSaving(false);
    }
  }

  const inputCls = 'w-full px-3 py-2 border-2 border-gray-400 rounded-lg bg-white text-base focus:border-blue-500 focus:outline-none';
  const labelCls = 'block text-sm font-medium text-gray-700 mb-0.5';

  return (
    <form onSubmit={handleSubmit} className="space-y-3 max-w-2xl">

      {/* Art der Führung — volle Breite */}
      <div>
        <label className={labelCls}>Art der Führung</label>
        <CustomSelect
          placeholder={artFuehrung}
          options={ARTEN.map((a) => ({ value: a, label: a }))}
          onChange={(v) => setArtFuehrung(v as ArtFuehrung)}
        />
      </div>

      {/* Beginn / Ende — nebeneinander auf Desktop, untereinander auf Mobile */}
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div>
          <label className={labelCls}>Beginn</label>
          <input
            type="datetime-local"
            value={beginn}
            onChange={(e) => setBeginn(e.target.value)}
            required
            className={inputCls}
          />
        </div>
        <div>
          <label className={labelCls}>Ende</label>
          <input
            type="datetime-local"
            value={ende}
            onChange={(e) => setEnde(e.target.value)}
            required
            className={inputCls}
          />
        </div>
      </div>

      {/* Besucher */}
      {showBesucher && <div>
        <label className={labelCls}>Anzahl Besucher</label>
        <input
          type="number"
          value={besucher}
          onChange={(e) => setBesucher(parseInt(e.target.value) || 0)}
          min={0}
          max={9999}
          className="w-32 px-3 py-2 border-2 border-gray-400 rounded-lg bg-white text-base focus:border-blue-500 focus:outline-none"
        />
      </div>}

      {/* BEOs */}
      <div>
        <label className={labelCls}>BEOs</label>
        <BeoSelector selected={beos} onChange={setBeos} />
      </div>

      {/* Objekte — abhängig von der Art der Führung */}
      {showObjekte && (
        <div>
          <label className={labelCls}>Beobachtete Objekte</label>
          {isSonne ? (
            <div className="flex items-center gap-2">
              <span className="inline-flex items-center bg-green-100 text-green-800 text-sm px-3 py-1.5 rounded-full">
                Sonne
              </span>
              <span className="text-xs text-gray-500">(bei Sonnenführung fest vorgegeben)</span>
            </div>
          ) : (
            <ObjektSelector selected={objekte} onChange={setObjekte} />
          )}
        </div>
      )}

      {/* Bemerkungen */}
      <div>
        <label className={labelCls}>
          Bemerkungen
          <span className="ml-2 text-gray-400 font-normal text-xs">({bemerkungen.length}/500)</span>
        </label>
        <textarea
          value={bemerkungen}
          onChange={(e) => setBemerkungen(e.target.value.slice(0, 500))}
          rows={2}
          className="w-full px-3 py-2 border-2 border-gray-400 rounded-lg bg-white text-base focus:border-blue-500 focus:outline-none resize-y"
          placeholder="Freier Text (max. 500 Zeichen)"
        />
      </div>

      {/* Wetter */}
      {wetter && (
        <div>
          <label className={labelCls}>Wetter (aktuell)</label>
          <div className="flex flex-wrap gap-4 text-sm text-gray-600 bg-gray-50 border border-gray-200 rounded-lg px-3 py-2">
            <span>🌡 {wetter.temp} °C</span>
            <span>💧 {wetter.feuchte} %</span>
            <span>🌬 {wetter.druck} hPa</span>
          </div>
        </div>
      )}

      {error && (
        <div className="bg-red-50 border border-red-300 text-red-700 px-3 py-2 rounded-lg text-sm">
          {error}
        </div>
      )}
      {success && !editEntry && (
        <div className="bg-green-50 border border-green-300 text-green-700 px-3 py-2 rounded-lg text-sm">
          Eintrag gespeichert.
        </div>
      )}

      {/* Buttons — volle Breite auf Mobile */}
      <div className="flex flex-col sm:flex-row gap-3">
        <button
          type="submit"
          disabled={saving}
          className="w-full sm:w-auto px-6 py-2 bg-[#85B7D7] hover:bg-[#6a9fc5] text-black font-medium rounded-lg transition-colors disabled:opacity-50 text-base"
        >
          {saving ? 'Speichern...' : editEntry ? 'Änderungen speichern' : 'Eintrag speichern'}
        </button>
        {editEntry && (
          <button
            type="button"
            onClick={onSaved}
            className="w-full sm:w-auto px-6 py-2 bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium rounded-lg transition-colors text-base"
          >
            Abbrechen
          </button>
        )}
      </div>
    </form>
  );
}