"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Avatar } from "@/components/ui/Avatar";
import { Icon } from "@/components/ui/Icon";
import { DatePicker } from "@/components/ui/DatePicker";
import { TimePicker } from "@/components/ui/TimePicker";
import { createMeetingAction, updateMeetingAction } from "@/lib/meetings/actions";
import type { MeetingDTO } from "@/lib/meetings/queries";

export type UserOpt = { id: string; name: string; avatarUrl: string | null };
export type TeamOpt = { id: string; name: string; color: string | null; memberIds: string[] };

export function MeetingDrawer({
  meeting,
  users,
  teams,
  defaultDate,
  onClose,
}: {
  meeting: MeetingDTO | null;
  users: UserOpt[];
  teams: TeamOpt[];
  defaultDate?: string;
  onClose: () => void;
}) {
  const router = useRouter();
  const isNew = !meeting;
  const s = meeting ? new Date(meeting.startAt) : null;
  const e = meeting ? new Date(meeting.endAt) : null;
  const hm = (d: Date) => `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
  const dstr = (d: Date) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;

  const [title, setTitle] = useState(meeting?.title ?? "");
  const [description, setDescription] = useState(meeting?.description ?? "");
  const [date, setDate] = useState(s ? dstr(s) : defaultDate ?? new Date().toISOString().slice(0, 10));
  const [startT, setStartT] = useState(s ? hm(s) : "10:00");
  const [endT, setEndT] = useState(e ? hm(e) : "11:00");
  const [location, setLocation] = useState(meeting?.location ?? "");
  const [ids, setIds] = useState<string[]>(meeting ? meeting.participants.map((p) => p.id) : []);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const toggle = (id: string) => setIds((a) => (a.includes(id) ? a.filter((x) => x !== id) : [...a, id]));
  const toggleTeam = (t: TeamOpt) => {
    const allIn = t.memberIds.length > 0 && t.memberIds.every((id) => ids.includes(id));
    setIds((a) => {
      const set = new Set(a);
      if (allIn) t.memberIds.forEach((id) => set.delete(id));
      else t.memberIds.forEach((id) => set.add(id));
      return [...set];
    });
  };

  const save = async () => {
    setSaving(true);
    setError(null);
    const startAt = new Date(`${date}T${startT}`).toISOString();
    const endAt = new Date(`${date}T${endT}`).toISOString();
    const payload = { title, description, startAt, endAt, location, participantIds: ids };
    const res = isNew ? await createMeetingAction(payload) : await updateMeetingAction(meeting!.id, payload);
    setSaving(false);
    if (res.error) return setError(res.error);
    onClose();
    router.refresh();
  };

  return (
    <div className="drawer-overlay" onMouseDown={(e2) => e2.target === e2.currentTarget && onClose()}>
      <div className="drawer animate-in">
        <div className="mb-5 flex items-center justify-between">
          <span className="eyebrow">{isNew ? "Neuer Termin" : "Termin verlegen"}</span>
          <button className="btn btn-ghost btn-sm" onClick={onClose} aria-label="Schließen"><Icon name="close" size={16} /></button>
        </div>
        {error ? <p className="field-error mb-3">{error}</p> : null}
        <div className="flex flex-col gap-4">
          <div className="field"><label className="label">Titel</label><input className="input" value={title} onChange={(e2) => setTitle(e2.target.value)} placeholder="z. B. Wochenplanung" /></div>
          <div className="field"><label className="label">Beschreibung</label><textarea className="textarea" style={{ minHeight: 64 }} value={description} onChange={(e2) => setDescription(e2.target.value)} placeholder="Agenda / Ziel" /></div>
          <div className="flex flex-wrap items-end gap-3">
            <div className="field" style={{ width: 200 }}><label className="label">Datum</label><DatePicker value={date} onChange={setDate} /></div>
            <div className="field" style={{ width: 130 }}><label className="label">Von</label><TimePicker value={startT} onChange={setStartT} /></div>
            <div className="field" style={{ width: 130 }}><label className="label">Bis</label><TimePicker value={endT} onChange={setEndT} /></div>
          </div>
          <div className="field"><label className="label">Ort (optional)</label><input className="input" value={location} onChange={(e2) => setLocation(e2.target.value)} placeholder="Raum / Adresse / Videolink" /></div>

          {teams.length > 0 ? (
            <div className="field">
              <label className="label">Ganze Teams einladen</label>
              <div className="flex flex-wrap gap-2">
                {teams.map((t) => {
                  const allIn = t.memberIds.length > 0 && t.memberIds.every((id) => ids.includes(id));
                  return (
                    <button key={t.id} type="button" className="pill" data-active={allIn} onClick={() => toggleTeam(t)}>
                      <span className="status-badge-dot" style={{ background: t.color ?? "var(--blue)" }} />
                      {t.name} <span className="text-muted">· {t.memberIds.length}</span>
                    </button>
                  );
                })}
              </div>
            </div>
          ) : null}

          <div className="field">
            <label className="label">Teilnehmende ({ids.length})</label>
            <div className="person-grid">
              {users.map((u) => {
                const on = ids.includes(u.id);
                return (
                  <button key={u.id} type="button" className="person-option" data-active={on} onClick={() => toggle(u.id)}>
                    <Avatar name={u.name} src={u.avatarUrl} size={30} />
                    <span className="min-w-0 flex-1 truncate text-left font-bold">{u.name}</span>
                    <span className="select-check" data-active={on}>{on ? <Icon name="check" size={13} /> : null}</span>
                  </button>
                );
              })}
            </div>
          </div>
        </div>
        <div className="form-footer">
          <span />
          <div className="flex items-center gap-2">
            <button className="btn btn-ghost" onClick={onClose} disabled={saving}>Abbrechen</button>
            <button className="btn btn-primary" onClick={save} disabled={saving || !title.trim()}>{saving ? "Speichern …" : isNew ? "Termin ansetzen" : "Speichern"}</button>
          </div>
        </div>
      </div>
    </div>
  );
}