"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Avatar } from "@/components/ui/Avatar";
import { Icon } from "@/components/ui/Icon";
import { Swatches } from "@/components/ui/Swatches";
import { DatePicker } from "@/components/ui/DatePicker";
import { confirmDialog, promptDialog, alertDialog } from "@/components/ui/Dialog";
import {
  createProjectAction,
  updateProjectAction,
  deleteProjectAction,
  addMilestoneAction,
  toggleMilestoneAction,
  deleteMilestoneAction,
  type ProjectInput,
} from "@/lib/projects/actions";
import type { ProjectDTO, ProjectMemberDTO, ProjectTeamDTO } from "@/lib/projects/queries";
import type { ProjectStatus, Priority } from "@prisma/client";

const STATUS: { value: ProjectStatus; label: string; color: string }[] = [
  { value: "PLANNING", label: "Planung", color: "#9ed7ff" },
  { value: "ACTIVE", label: "Aktiv", color: "#7ee787" },
  { value: "ON_HOLD", label: "Pausiert", color: "#ffc36b" },
  { value: "COMPLETED", label: "Abgeschlossen", color: "#c8bcff" },
  { value: "ARCHIVED", label: "Archiviert", color: "#8aa0c8" },
];
const statusMeta = (s: string) => STATUS.find((x) => x.value === s) ?? STATUS[0];

const PRIORITY: { value: Priority; label: string; color: string }[] = [
  { value: "LOW", label: "Niedrig", color: "#8aa0c8" },
  { value: "MEDIUM", label: "Mittel", color: "#9ed7ff" },
  { value: "HIGH", label: "Hoch", color: "#ffc36b" },
  { value: "URGENT", label: "Dringend", color: "#ff7a9c" },
];
const prioMeta = (p: string) => PRIORITY.find((x) => x.value === p) ?? PRIORITY[1];

function fmtDate(iso: string | null): string {
  return iso ? new Date(iso).toLocaleDateString("de-DE", { day: "2-digit", month: "2-digit", year: "numeric" }) : "—";
}

export function ProjectsManager({
  projects,
  users,
  teams,
  canManage,
}: {
  projects: ProjectDTO[];
  users: ProjectMemberDTO[];
  teams: ProjectTeamDTO[];
  canManage: boolean;
}) {
  const router = useRouter();
  const [editing, setEditing] = useState<ProjectDTO | "new" | null>(null);
  const [filter, setFilter] = useState<ProjectStatus | "ALL">("ALL");

  const shown = filter === "ALL" ? projects : projects.filter((p) => p.status === filter);

  const activeCount = projects.filter((p) => p.status === "ACTIVE").length;
  // Ø-Fortschritt nur aus laufenden Projekten (Planung, Aktiv, Pausiert) —
  // abgeschlossene/archivierte verfälschen den Wert.
  const running = projects.filter((p) => ["PLANNING", "ACTIVE", "ON_HOLD"].includes(p.status));
  const avgProgress = running.length
    ? Math.round(running.reduce((s, p) => s + p.progress, 0) / running.length)
    : 0;
  const openMs = projects.reduce((s, p) => s + p.milestones.filter((m) => !m.done).length, 0);

  const onDelete = async (p: ProjectDTO) => {
    if (
      !(await confirmDialog({
        title: "Projekt löschen?",
        message: `„${p.name}“ wird mit allen Meilensteinen entfernt. Verknüpfte Boards/Aufgaben werden ebenfalls gelöscht.`,
        danger: true,
      }))
    )
      return;
    const res = await deleteProjectAction(p.id);
    if (res.error) await alertDialog({ title: "Fehler", message: res.error, danger: true });
    else router.refresh();
  };

  return (
    <>
      <section className="grid grid-cols-2 gap-4 xl:grid-cols-4" data-reveal>
        <div className="stat-tile"><span className="stat-tile-value">{projects.length}</span><span className="stat-tile-label">Projekte</span></div>
        <div className="stat-tile"><span className="stat-tile-value">{activeCount}</span><span className="stat-tile-label">Aktiv</span></div>
        <div className="stat-tile"><span className="stat-tile-value">{avgProgress}%</span><span className="stat-tile-label">Ø Fortschritt</span></div>
        <div className="stat-tile"><span className="stat-tile-value">{openMs}</span><span className="stat-tile-label">Offene Meilensteine</span></div>
      </section>

      <div className="flex flex-wrap items-center justify-between gap-3" data-reveal>
        <div className="flex flex-wrap gap-2">
          <button className="pill" data-active={filter === "ALL"} onClick={() => setFilter("ALL")}>
            Alle <span className="badge">{projects.length}</span>
          </button>
          {STATUS.map((s) => {
            const n = projects.filter((p) => p.status === s.value).length;
            if (n === 0) return null;
            return (
              <button key={s.value} className="pill" data-active={filter === s.value} onClick={() => setFilter(s.value)}>
                <span className="status-badge-dot" style={{ background: s.color }} />
                {s.label} <span className="badge">{n}</span>
              </button>
            );
          })}
        </div>
        {canManage ? (
          <button className="btn btn-primary btn-sm" onClick={() => setEditing("new")}>
            <Icon name="plus" size={15} /> Projekt anlegen
          </button>
        ) : null}
      </div>

      {shown.length === 0 ? (
        <div className="card" data-reveal>
          <p className="text-muted text-sm">Keine Projekte in dieser Ansicht.</p>
        </div>
      ) : (
        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
          {shown.map((p) => {
            const sm = statusMeta(p.status);
            const pm = prioMeta(p.priority);
            const accent = p.color ?? sm.color;
            const doneMs = p.milestones.filter((m) => m.done).length;
            return (
              <button
                key={p.id}
                className="project-card text-left"
                style={{
                  ["--accent" as string]: accent,
                  borderLeft: `4px solid ${accent}`,
                  background: `linear-gradient(100deg, ${accent}14, transparent 55%), var(--panel2)`,
                }}
                onClick={() => canManage && setEditing(p)}
              >
                <div className="flex items-start justify-between gap-3">
                  <span className="status-badge" style={{ borderColor: `${sm.color}55` }}>
                    <span className="status-badge-dot" style={{ background: sm.color }} />
                    {sm.label}
                  </span>
                  <span className="prio-tag" style={{ color: pm.color, borderColor: `${pm.color}55` }}>
                    {pm.label}
                  </span>
                </div>

                <div className="mt-3 flex items-center gap-2">
                  <span className="badge" style={{ flexShrink: 0 }}>{p.key}</span>
                  <h3 className="truncate">{p.name}</h3>
                </div>

                {p.description ? <p className="text-muted mt-2 line-clamp-2 text-sm">{p.description}</p> : null}

                <div className="mt-4">
                  <div className="mb-1.5 flex items-center justify-between text-xs text-muted">
                    <span>Fortschritt</span>
                    <span className="font-bold">{p.progress}%</span>
                  </div>
                  <span className="progress-track">
                    <span className="progress-fill" style={{ width: `${p.progress}%`, background: accent }} />
                  </span>
                </div>

                <div className="mt-4 flex items-center justify-between gap-3">
                  <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted">
                    <span className="inline-flex items-center gap-1" title="Deadline">
                      <Icon name="calendar" size={13} /> {fmtDate(p.deadline)}
                    </span>
                    {p.milestones.length > 0 ? (
                      <span className="inline-flex items-center gap-1" title="Meilensteine">
                        <Icon name="check" size={13} /> {doneMs}/{p.milestones.length}
                      </span>
                    ) : null}
                    {p.taskCount > 0 ? (
                      <span className="inline-flex items-center gap-1" title="Aufgaben">
                        <Icon name="kanban" size={13} /> {p.taskCount}
                      </span>
                    ) : null}
                  </div>
                  <div className="flex items-center">
                    {p.lead ? <Avatar name={p.lead.name} src={p.lead.avatarUrl} size={26} /> : null}
                    {p.members.length > 0 ? (
                      <div className="assignee-stack" style={{ marginLeft: p.lead ? 6 : 0 }}>
                        {p.members.slice(0, 3).map((m) => (
                          <Avatar key={m.id} name={m.name} src={m.avatarUrl} size={24} />
                        ))}
                        {p.members.length > 3 ? (
                          <span className="badge" style={{ marginLeft: -8 }}>+{p.members.length - 3}</span>
                        ) : null}
                      </div>
                    ) : null}
                  </div>
                </div>
              </button>
            );
          })}
        </div>
      )}

      {editing ? (
        <ProjectDrawer
          project={editing === "new" ? null : editing}
          users={users}
          teams={teams}
          onClose={() => setEditing(null)}
          onDelete={onDelete}
        />
      ) : null}
    </>
  );
}

function ProjectDrawer({
  project,
  users,
  teams,
  onClose,
  onDelete,
}: {
  project: ProjectDTO | null;
  users: ProjectMemberDTO[];
  teams: ProjectTeamDTO[];
  onClose: () => void;
  onDelete: (p: ProjectDTO) => void;
}) {
  const router = useRouter();
  const isNew = !project;
  const [name, setName] = useState(project?.name ?? "");
  const [key, setKey] = useState(project?.key ?? "");
  const [description, setDescription] = useState(project?.description ?? "");
  const [status, setStatus] = useState<ProjectStatus>(project?.status ?? "PLANNING");
  const [priority, setPriority] = useState<Priority>(project?.priority ?? "MEDIUM");
  const [progress, setProgress] = useState(project?.progress ?? 0);
  const [color, setColor] = useState<string | null>(project?.color ?? null);
  const [startDate, setStartDate] = useState(project?.startDate ? project.startDate.slice(0, 10) : "");
  const [deadline, setDeadline] = useState(project?.deadline ? project.deadline.slice(0, 10) : "");
  const [leadId, setLeadId] = useState(project?.leadId ?? "");
  const [memberIds, setMemberIds] = useState<string[]>(project?.memberIds ?? []);
  const [milestones, setMilestones] = useState(project?.milestones ?? []);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const toggleMember = (id: string) =>
    setMemberIds((a) => (a.includes(id) ? a.filter((x) => x !== id) : [...a, id]));
  // Ganzes Team hinzufügen bzw. entfernen (Toggle nach vollständiger Mitgliedschaft).
  const toggleTeam = (t: ProjectTeamDTO) => {
    const allIn = t.memberIds.every((id) => memberIds.includes(id));
    setMemberIds((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 payload = (): ProjectInput => ({
    name,
    key,
    description,
    status,
    priority,
    progress,
    color,
    startDate: startDate || null,
    deadline: deadline || null,
    leadId: leadId || null,
    memberIds,
  });

  const save = async () => {
    setSaving(true);
    setError(null);
    const res = isNew
      ? await createProjectAction(payload())
      : await updateProjectAction(project!.id, payload());
    setSaving(false);
    if (res.error) return setError(res.error);
    onClose();
    router.refresh();
  };

  // ── Meilensteine (nur im Bearbeiten-Modus, da Projekt existieren muss) ──
  const addMs = async () => {
    if (!project) return;
    const title = await promptDialog({ title: "Neuer Meilenstein", placeholder: "Titel", confirmLabel: "Hinzufügen" });
    if (!title) return;
    const res = await addMilestoneAction(project.id, title);
    if (res.id) {
      setMilestones((m) => [...m, { id: res.id!, title, dueDate: null, done: false }]);
      router.refresh();
    }
  };
  const toggleMs = async (id: string, done: boolean) => {
    setMilestones((ms) => ms.map((m) => (m.id === id ? { ...m, done } : m)));
    await toggleMilestoneAction(id, done);
    router.refresh();
  };
  const removeMs = async (id: string) => {
    setMilestones((ms) => ms.filter((m) => m.id !== id));
    await deleteMilestoneAction(id);
    router.refresh();
  };

  return (
    <div className="drawer-overlay" onMouseDown={(e) => e.target === e.currentTarget && onClose()}>
      <div className="drawer animate-in">
        <div className="mb-5 flex items-center justify-between">
          <span className="eyebrow">{isNew ? "Neues Projekt" : project!.key}</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="grid grid-cols-1 gap-4 sm:grid-cols-[1fr_auto]">
            <div className="field">
              <label className="label">Name</label>
              <input className="input" value={name} onChange={(e) => setName(e.target.value)} placeholder="Projektname" />
            </div>
            <div className="field">
              <label className="label">Kürzel</label>
              <input
                className="input"
                style={{ width: 120, textTransform: "uppercase" }}
                value={key}
                maxLength={20}
                onChange={(e) => setKey(e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, ""))}
                placeholder="Auto"
              />
            </div>
          </div>
          <div className="field">
            <label className="label">Beschreibung</label>
            <textarea className="textarea" style={{ minHeight: 70 }} value={description} onChange={(e) => setDescription(e.target.value)} placeholder="Worum geht es?" />
          </div>

          <div className="field">
            <label className="label">Status</label>
            <div className="flex flex-wrap gap-2">
              {STATUS.map((s) => (
                <button key={s.value} type="button" className="pill" data-active={status === s.value} onClick={() => setStatus(s.value)}>
                  <span className="status-badge-dot" style={{ background: s.color }} />
                  {s.label}
                </button>
              ))}
            </div>
          </div>

          <div className="field">
            <label className="label">Priorität</label>
            <div className="flex flex-wrap gap-2">
              {PRIORITY.map((p) => (
                <button key={p.value} type="button" className="pill" data-active={priority === p.value} onClick={() => setPriority(p.value)}>
                  {p.label}
                </button>
              ))}
            </div>
          </div>

          <div className="field">
            <label className="label">Fortschritt: {progress}%</label>
            <input type="range" min={0} max={100} step={5} value={progress} onChange={(e) => setProgress(Number(e.target.value))} className="range" />
          </div>

          <div className="field">
            <label className="label">Farbe</label>
            <Swatches value={color} allowNone onChange={setColor} />
          </div>

          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <div className="field">
              <label className="label">Start</label>
              <DatePicker value={startDate} onChange={setStartDate} />
            </div>
            <div className="field">
              <label className="label">Deadline</label>
              <DatePicker value={deadline} onChange={setDeadline} />
            </div>
          </div>

          <div className="field">
            <label className="label">Projektleitung</label>
            <select className="select" value={leadId} onChange={(e) => setLeadId(e.target.value)}>
              <option value="">— Keine —</option>
              {users.map((u) => (
                <option key={u.id} value={u.id}>{u.name}</option>
              ))}
            </select>
          </div>

          {teams.length > 0 ? (
            <div className="field">
              <label className="label">Ganze Teams hinzufügen</label>
              <div className="flex flex-wrap gap-2">
                {teams.map((t) => {
                  const allIn = t.memberIds.length > 0 && t.memberIds.every((id) => memberIds.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">Team ({memberIds.length})</label>
            <div className="person-grid">
              {users.map((u) => {
                const active = memberIds.includes(u.id);
                return (
                  <button key={u.id} type="button" className="person-option" data-active={active} onClick={() => toggleMember(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={active}>
                      {active ? <Icon name="check" size={13} /> : null}
                    </span>
                  </button>
                );
              })}
            </div>
          </div>

          {!isNew ? (
            <div className="field">
              <div className="flex items-center justify-between">
                <label className="label">Meilensteine</label>
                <button className="pill btn-sm" type="button" onClick={addMs}>
                  <Icon name="plus" size={14} /> Meilenstein
                </button>
              </div>
              {milestones.length === 0 ? (
                <p className="text-muted text-sm">Noch keine Meilensteine.</p>
              ) : (
                <div className="flex flex-col gap-1.5">
                  {milestones.map((m) => (
                    <div key={m.id} className="milestone-row">
                      <button type="button" className="milestone-check" data-active={m.done} onClick={() => toggleMs(m.id, !m.done)}>
                        {m.done ? <Icon name="check" size={12} /> : null}
                      </button>
                      <span className="min-w-0 flex-1" style={{ textDecoration: m.done ? "line-through" : "none", opacity: m.done ? 0.6 : 1 }}>
                        {m.title}
                      </span>
                      <button type="button" className="att-preview-x" onClick={() => removeMs(m.id)} aria-label="Entfernen">
                        <Icon name="trash" size={13} />
                      </button>
                    </div>
                  ))}
                </div>
              )}
            </div>
          ) : (
            <p className="text-muted text-xs">Meilensteine kannst du nach dem Speichern hinzufügen.</p>
          )}

        </div>

        <div className="form-footer">
          {!isNew ? (
            <button className="btn btn-ghost" onClick={() => { onClose(); onDelete(project!); }} disabled={saving}>
              <Icon name="trash" size={15} /> Löschen
            </button>
          ) : (
            <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 || !name.trim()}>
              {saving ? "Speichern …" : isNew ? "Projekt anlegen" : "Speichern"}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}