'use client';

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

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 snapTo5(value: string): string {
  if (!value) return value;
  // Fix 4-digit years that are actually < 100 (e.g. "0024" → "2024")
  const fixed = value.replace(/^(\d{4})(-.+)$/, (_, y, rest) => {
    const year = parseInt(y, 10);
    return (year < 100 ? String(year + 2000) : y) + rest;
  });
  const d = new Date(fixed);
  if (isNaN(d.getTime())) return value;
  d.setMinutes(Math.round(d.getMinutes() / 5) * 5);
  d.setSeconds(0);
  const pad = (n: number) => String(n).padStart(2, '0');
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
}

function snapTimeTo5(time: string): string {
  if (!time) return time;
  const [hStr, mStr] = time.split(':');
  const h = parseInt(hStr, 10);
  const m = parseInt(mStr, 10);
  if (isNaN(h) || isNaN(m)) return time;
  const snappedM = Math.round(m / 5) * 5;
  const finalH = snappedM >= 60 ? (h + 1) % 24 : h;
  const finalM = snappedM >= 60 ? 0 : snappedM;
  const pad = (n: number) => String(n).padStart(2, '0');
  return `${pad(finalH)}:${pad(finalM)}`;
}

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

const NO_OBJEKTE_ARTEN: ArtFuehrung[] = ['BEOS', 'TD'];
const SONNE_ART: ArtFuehrung = 'SonF';

export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved }: Props) {
  const [artFuehrung, setArtFuehrung] = useState<ArtFuehrung>('RF');
  const [beginn, setBeginn] = useState(nowLocalDatetime());
  const [ende, setEnde] = useState(nowLocalDatetime());
  const [besucher, setBesucher] = useState<number | ''>('');
  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('RF');
      setBeginn(nowLocalDatetime());
      setEnde(nowLocalDatetime());
      setBesucher(0);
      setBeos([currentUserBeo]);
      setObjekte([]);
      setBemerkungen('');
      setBesucher('');
    }
  }, [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 === '' ? 0 : 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);
      setTimeout(() => setSuccess(false), 5000);
      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 mx-auto border-2 border-gray-400 rounded-xl p-4 bg-white">

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

      {/* Beginn / Ende / Besucher */}
      <div className="flex flex-col sm:flex-row gap-3 sm:items-end">
        <div className="w-full sm:flex-1">
          <label className={labelCls}>Beginn</label>
          <div className="flex gap-2">
            <input
              type="date"
              value={beginn.slice(0, 10)}
              onChange={(e) => {
                if (!e.target.value) return;
                setBeginn(e.target.value + 'T' + (beginn.slice(11, 16) || '00:00'));
                setEnde(e.target.value + 'T' + (ende.slice(11, 16) || '00:00'));
              }}
              required
              className="flex-1 px-2 py-2 border-2 border-gray-400 rounded-lg bg-white text-sm text-gray-900 focus:border-blue-500 focus:outline-none"
            />
            <TimePicker5
              value={beginn.slice(11, 16)}
              onChange={(t) => {
                setBeginn(beginn.slice(0, 10) + 'T' + t);
                setEnde(ende.slice(0, 10) + 'T' + t);
              }}
              className="w-24"
            />
          </div>
        </div>
        <div className="w-full sm:flex-1">
          <label className={labelCls}>Ende</label>
          <div className="flex gap-2">
            <input
              type="date"
              value={ende.slice(0, 10)}
              onChange={(e) => {
                if (!e.target.value) return;
                setEnde(e.target.value + 'T' + (ende.slice(11, 16) || '00:00'));
              }}
              required
              className="flex-1 px-2 py-2 border-2 border-gray-400 rounded-lg bg-white text-sm text-gray-900 focus:border-blue-500 focus:outline-none"
            />
            <TimePicker5
              value={ende.slice(11, 16)}
              onChange={(t) => setEnde(ende.slice(0, 10) + 'T' + t)}
              className="w-24"
            />
          </div>
        </div>
        {showBesucher && (
          <div className="sm:shrink-0">
            <label className={labelCls}>Besucher</label>
            <input
              type="number"
              value={besucher}
              onChange={(e) => setBesucher(e.target.value === '' ? '' : parseInt(e.target.value) || 0)}
              min={0}
              max={9999}
              className="w-20 px-2 py-2 border-2 border-gray-400 rounded-lg bg-white text-base focus:border-blue-500 focus:outline-none"
            />
          </div>
        )}
      </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 — zentriert */}
      <div className="flex flex-col sm:flex-row gap-3 justify-center">
        <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>
  );
}