import { useMemo, useState } from "react";

const SERVICES = [
  {
    id: "IS-2026-004",
    serviceType: "Atemregler-Service",
    objectType: "regulator",
    objectLabel: "Atemregler",
    equipment: "Atemregler Set A1",
    manufacturer: "Apeks",
    serial: "APX-7712",
    inventory: "REG-001",
    ownerType: "customer",
    owner: "Max Muster",
    assignedTo: "David",
    status: "in_progress",
    dueStatus: "due_soon",
    dueDate: "15.05.2026",
    result: "open",
    cost: "—",
  },
  {
    id: "IS-2026-005",
    serviceType: "Jacket-Service",
    objectType: "bcd",
    objectLabel: "Jacket / BCD",
    equipment: "Jacket Ocean Pro",
    manufacturer: "Scubapro",
    serial: "",
    inventory: "BCD-018",
    ownerType: "internal",
    owner: "Intern",
    assignedTo: "Maria",
    status: "rework_required",
    dueStatus: "overdue",
    dueDate: "02.05.2026",
    result: "rework_required",
    cost: "CHF 45.00",
  },
  {
    id: "IS-2026-006",
    serviceType: "Funktionsprüfung",
    objectType: "computer",
    objectLabel: "Tauchcomputer",
    equipment: "Perdix 2 Schulgerät",
    manufacturer: "Shearwater",
    serial: "SW-9981",
    inventory: "COM-003",
    ownerType: "internal",
    owner: "Intern",
    assignedTo: "Nicht zugewiesen",
    status: "open",
    dueStatus: "ok",
    dueDate: "18.05.2026",
    result: "open",
    cost: "—",
  },
  {
    id: "IS-2026-001",
    serviceType: "Atemregler-Service",
    objectType: "regulator",
    objectLabel: "Atemregler",
    equipment: "Atemregler Set B2",
    manufacturer: "Apeks",
    serial: "APX-7820",
    inventory: "REG-002",
    ownerType: "customer",
    owner: "Sandra Keller",
    assignedTo: "David",
    status: "completed",
    dueStatus: "ok",
    dueDate: "28.04.2026",
    result: "passed",
    cost: "CHF 120.00",
  },
  {
    id: "IS-2026-007",
    serviceType: "Generischer Service",
    objectType: "other",
    objectLabel: "Sonstiges Equipment",
    equipment: "Lampe Backup 3",
    manufacturer: "BigBlue",
    serial: "BB-4401",
    inventory: "LMP-009",
    ownerType: "internal",
    owner: "Intern",
    assignedTo: "Maria",
    status: "waiting_for_parts",
    dueStatus: "due_today",
    dueDate: "08.05.2026",
    result: "open",
    cost: "—",
  },
  {
    id: "IS-2026-008",
    serviceType: "Atemregler-Service",
    objectType: "regulator",
    objectLabel: "Atemregler",
    equipment: "Atemregler Set C3",
    manufacturer: "Mares",
    serial: "MR-5541",
    inventory: "REG-003",
    ownerType: "customer",
    owner: "Luca Weber",
    assignedTo: "David",
    status: "cancelled",
    dueStatus: "unknown",
    dueDate: "—",
    result: "cancelled",
    cost: "—",
  },
];

const statusStyles = {
  draft: { label: "Entwurf", bg: "#F1EFE8", color: "#5F5E5A" },
  open: { label: "Offen", bg: "#E6F1FB", color: "#185FA5" },
  in_progress: { label: "In Arbeit", bg: "#EEEDFE", color: "#534AB7" },
  waiting_for_parts: { label: "Wartet", bg: "#FAEEDA", color: "#BA7517" },
  rework_required: { label: "Nacharbeit", bg: "#FCEBEB", color: "#A32D2D" },
  completed: { label: "Abgeschlossen", bg: "#EAF3DE", color: "#3B6D11" },
  cancelled: { label: "Abgebrochen", bg: "#F1EFE8", color: "#5F5E5A" },
  corrected: { label: "Korrigiert", bg: "#FAEEDA", color: "#BA7517" },
};

const dueStyles = {
  ok: { label: "OK", bg: "#EAF3DE", color: "#3B6D11" },
  due_soon: { label: "Bald fällig", bg: "#FAEEDA", color: "#BA7517" },
  due_today: { label: "Heute", bg: "#FAEEDA", color: "#BA7517" },
  overdue: { label: "Überfällig", bg: "#FCEBEB", color: "#A32D2D" },
  unknown: { label: "Unbekannt", bg: "#F1EFE8", color: "#5F5E5A" },
};

const resultStyles = {
  open: { label: "Offen", bg: "#F1EFE8", color: "#5F5E5A" },
  passed: { label: "Bestanden", bg: "#EAF3DE", color: "#3B6D11" },
  failed: { label: "Nicht bestanden", bg: "#FCEBEB", color: "#A32D2D" },
  rework_required: { label: "Nacharbeit", bg: "#FCEBEB", color: "#A32D2D" },
  cancelled: { label: "Abgebrochen", bg: "#F1EFE8", color: "#5F5E5A" },
};

const objectOptions = [
  ["all", "Alle Objekte"],
  ["regulator", "Atemregler"],
  ["bcd", "Jacket / BCD"],
  ["computer", "Tauchcomputer"],
  ["other", "Sonstiges"],
];

const chip = (style, label) => (
  <span style={{ background: style.bg, color: style.color, fontSize: 11, fontWeight: 500, padding: "2px 8px", borderRadius: 20, whiteSpace: "nowrap" }}>
    {label}
  </span>
);

export default function IS01InhouseServiceUebersicht() {
  const [search, setSearch] = useState("");
  const [statusFilter, setStatusFilter] = useState("all");
  const [objectFilter, setObjectFilter] = useState("all");
  const [ownerFilter, setOwnerFilter] = useState("all");
  const [assignedFilter, setAssignedFilter] = useState("all");
  const [dueFilter, setDueFilter] = useState("all");
  const [selectedId, setSelectedId] = useState(null);

  const filtered = useMemo(() => {
    const q = search.trim().toLowerCase();
    return SERVICES.filter((item) => {
      const haystack = [
        item.id,
        item.serviceType,
        item.objectLabel,
        item.equipment,
        item.manufacturer,
        item.serial,
        item.inventory,
        item.owner,
        item.assignedTo,
      ].join(" ").toLowerCase();

      return (!q || haystack.includes(q)) &&
        (statusFilter === "all" || item.status === statusFilter) &&
        (objectFilter === "all" || item.objectType === objectFilter) &&
        (ownerFilter === "all" || item.ownerType === ownerFilter) &&
        (assignedFilter === "all" || item.assignedTo === assignedFilter) &&
        (dueFilter === "all" || item.dueStatus === dueFilter);
    });
  }, [search, statusFilter, objectFilter, ownerFilter, assignedFilter, dueFilter]);

  const counts = {
    total: SERVICES.length,
    open: SERVICES.filter((s) => s.status === "open").length,
    inProgress: SERVICES.filter((s) => s.status === "in_progress").length,
    waiting: SERVICES.filter((s) => s.status === "waiting_for_parts").length,
    rework: SERVICES.filter((s) => s.status === "rework_required" || s.result === "rework_required" || s.result === "failed").length,
    overdue: SERVICES.filter((s) => s.dueStatus === "overdue").length,
    completed: SERVICES.filter((s) => s.status === "completed").length,
  };

  const statCards = [
    { label: "Offen", value: counts.open, bg: "#E6F1FB", color: "#185FA5", action: () => setStatusFilter("open") },
    { label: "In Arbeit", value: counts.inProgress, bg: "#EEEDFE", color: "#534AB7", action: () => setStatusFilter("in_progress") },
    { label: "Wartet", value: counts.waiting, bg: "#FAEEDA", color: "#BA7517", action: () => setStatusFilter("waiting_for_parts") },
    { label: "Nacharbeit", value: counts.rework, bg: "#FCEBEB", color: "#A32D2D", action: () => setStatusFilter("rework_required") },
    { label: "Überfällig", value: counts.overdue, bg: "#FCEBEB", color: "#A32D2D", action: () => setDueFilter("overdue") },
    { label: "Abgeschlossen", value: counts.completed, bg: "#EAF3DE", color: "#3B6D11", action: () => setStatusFilter("completed") },
  ];

  return (
    <div style={{ fontFamily: "var(--font-sans, system-ui)", background: "#F1EFE8", minHeight: 720, borderRadius: 8, overflow: "hidden" }}>
      <div style={{ background: "#1a1a18", padding: "10px 20px", fontSize: 13, display: "flex", alignItems: "center", gap: 16, borderRadius: "8px 8px 0 0" }}>
        <span style={{ fontWeight: 700, color: "#fff" }}>DiveLogix360</span>
        <span style={{ color: "#5F5E5A" }}>|</span>
        <span style={{ color: "#888780" }}>Tenant-Portal</span>
        <div style={{ marginLeft: "auto", display: "flex", gap: 16, fontSize: 12 }}>
          <span style={{ color: "#888780" }}>Equipment</span>
          <span style={{ color: "#fff", fontWeight: 500, borderBottom: "1px solid #185FA5", paddingBottom: 2 }}>Inhouse-Service</span>
          <span style={{ color: "#888780" }}>Fristen</span>
          <span style={{ color: "#D3D1C7", fontWeight: 500 }}>TSH · MA</span>
        </div>
      </div>

      <div style={{ padding: "20px 24px" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 18 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <h1 style={{ fontSize: 20, fontWeight: 500, color: "#1a1a18", margin: 0 }}>Inhouse-Service</h1>
            <span style={{ background: "#E6F1FB", color: "#185FA5", fontSize: 11, fontWeight: 500, padding: "2px 8px", borderRadius: 20 }}>IS-01</span>
            <span style={{ background: "#FAEEDA", color: "#BA7517", fontSize: 11, fontWeight: 500, padding: "2px 8px", borderRadius: 20 }}>{counts.rework + counts.overdue} kritisch</span>
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <button onClick={() => alert("QR-Code scannen → Equipment auswählen → Service starten")}
              style={{ padding: "8px 14px", fontSize: 13, background: "#fff", border: "1px solid #B4B2A9", borderRadius: 6, color: "#5F5E5A", cursor: "pointer", fontWeight: 500 }}>
              QR scannen
            </button>
            <button onClick={() => alert("→ IS-02: Servicevorgang starten")}
              style={{ padding: "8px 16px", fontSize: 13, background: "#185FA5", border: "none", borderRadius: 6, color: "#fff", cursor: "pointer", fontWeight: 500 }}>
              + Service starten
            </button>
          </div>
        </div>

        <div style={{ background: "#fff", border: "1px solid #D3D1C7", borderRadius: 8, padding: "10px 14px", marginBottom: 16 }}>
          <div style={{ fontSize: 10, fontWeight: 500, color: "#888780", marginBottom: 8, textTransform: "uppercase", letterSpacing: 0.5 }}>Übersicht</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 8 }}>
            {statCards.map((s) => (
              <button key={s.label} onClick={s.action}
                style={{ background: s.bg, border: "none", borderRadius: 6, padding: "8px 10px", textAlign: "center", cursor: "pointer" }}>
                <div style={{ fontSize: 18, fontWeight: 500, color: s.color }}>{s.value}</div>
                <div style={{ fontSize: 10, color: s.color, marginTop: 1 }}>{s.label}</div>
              </button>
            ))}
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 150px 160px 130px 150px 140px", gap: 10, marginBottom: 12 }}>
          <input value={search} onChange={(e) => setSearch(e.target.value)}
            placeholder="Suche: Equipment, Kunde, Seriennummer, Serviceart..."
            style={{ padding: "7px 12px", fontSize: 13, border: "1px solid #B4B2A9", borderRadius: 6, background: "#fff", outline: "none" }} />
          <select value={statusFilter} onChange={(e) => setStatusFilter(e.target.value)} style={selectStyle}>
            <option value="all">Status</option>
            <option value="open">Offen</option>
            <option value="in_progress">In Arbeit</option>
            <option value="waiting_for_parts">Wartet</option>
            <option value="rework_required">Nacharbeit</option>
            <option value="completed">Abgeschlossen</option>
            <option value="cancelled">Abgebrochen</option>
          </select>
          <select value={objectFilter} onChange={(e) => setObjectFilter(e.target.value)} style={selectStyle}>
            {objectOptions.map(([value, label]) => <option key={value} value={value}>{label}</option>)}
          </select>
          <select value={ownerFilter} onChange={(e) => setOwnerFilter(e.target.value)} style={selectStyle}>
            <option value="all">Eigentümer</option>
            <option value="internal">Intern</option>
            <option value="customer">Kunde</option>
          </select>
          <select value={assignedFilter} onChange={(e) => setAssignedFilter(e.target.value)} style={selectStyle}>
            <option value="all">Mitarbeiter</option>
            <option value="David">David</option>
            <option value="Maria">Maria</option>
            <option value="Nicht zugewiesen">Nicht zugewiesen</option>
          </select>
          <select value={dueFilter} onChange={(e) => setDueFilter(e.target.value)} style={selectStyle}>
            <option value="all">Friststatus</option>
            <option value="ok">OK</option>
            <option value="due_soon">Bald fällig</option>
            <option value="due_today">Heute</option>
            <option value="overdue">Überfällig</option>
            <option value="unknown">Unbekannt</option>
          </select>
        </div>

        <div style={{ display: "flex", gap: 8, marginBottom: 14 }}>
          <QuickFilter label="Offen" onClick={() => setStatusFilter("open")} />
          <QuickFilter label="In Arbeit" onClick={() => setStatusFilter("in_progress")} />
          <QuickFilter label="Nacharbeit" onClick={() => setStatusFilter("rework_required")} />
          <QuickFilter label="Überfällig" onClick={() => setDueFilter("overdue")} />
          <QuickFilter label="Heute" onClick={() => setDueFilter("due_today")} />
          <QuickFilter label="Meine Vorgänge" onClick={() => setAssignedFilter("David")} />
          <button onClick={() => { setSearch(""); setStatusFilter("all"); setObjectFilter("all"); setOwnerFilter("all"); setAssignedFilter("all"); setDueFilter("all"); }}
            style={{ fontSize: 11, padding: "5px 10px", background: "transparent", border: "1px solid #B4B2A9", borderRadius: 14, color: "#5F5E5A", cursor: "pointer" }}>
            Filter zurücksetzen
          </button>
        </div>

        <div style={{ background: "#fff", border: "1px solid #D3D1C7", borderRadius: 8, overflow: "hidden" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1.25fr 1.55fr 1.05fr 1.05fr 1.1fr 1.35fr 1.1fr", padding: "10px 14px", background: "#F1EFE8", borderBottom: "1px solid #D3D1C7" }}>
            {["Service", "Equipment", "Objekt", "Eigentümer", "Mitarbeiter", "Frist / Ergebnis", "Aktionen"].map((h) => (
              <div key={h} style={{ fontSize: 11, fontWeight: 500, color: "#5F5E5A" }}>{h}</div>
            ))}
          </div>

          {filtered.length === 0 && (
            <div style={{ padding: "26px", textAlign: "center", color: "#888780", fontSize: 13 }}>Keine passenden Servicevorgänge gefunden.</div>
          )}

          {filtered.map((item, index) => {
            const isSelected = selectedId === item.id;
            const status = statusStyles[item.status];
            const due = dueStyles[item.dueStatus];
            const result = resultStyles[item.result];
            const critical = item.status === "rework_required" || item.dueStatus === "overdue" || item.result === "failed" || item.result === "rework_required";
            return (
              <div key={item.id}
                onClick={() => setSelectedId(isSelected ? null : item.id)}
                style={{
                  display: "grid",
                  gridTemplateColumns: "1.25fr 1.55fr 1.05fr 1.05fr 1.1fr 1.35fr 1.1fr",
                  padding: "12px 14px",
                  borderBottom: index < filtered.length - 1 ? "1px solid #F1EFE8" : "none",
                  background: isSelected ? "#E6F1FB" : "#fff",
                  cursor: "pointer",
                  alignItems: "center",
                  gap: 8,
                  borderLeft: critical ? "4px solid #A32D2D" : "4px solid transparent",
                }}>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 500, color: "#1a1a18" }}>{item.id}</div>
                  <div style={{ fontSize: 11, color: "#888780", marginTop: 2 }}>{item.serviceType}</div>
                  <div style={{ marginTop: 5 }}>{chip(status, status.label)}</div>
                </div>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 500, color: "#1a1a18" }}>{item.equipment}</div>
                  <div style={{ fontSize: 11, color: "#888780", marginTop: 2 }}>{item.manufacturer} · {item.serial || item.inventory}</div>
                </div>
                <div style={{ fontSize: 12, color: "#5F5E5A" }}>{item.objectLabel}</div>
                <div>
                  {chip(item.ownerType === "customer" ? { bg: "#EEEDFE", color: "#534AB7" } : { bg: "#E6F1FB", color: "#185FA5" }, item.ownerType === "customer" ? "Kunde" : "Intern")}
                  <div style={{ fontSize: 10, color: "#888780", marginTop: 4 }}>{item.owner}</div>
                </div>
                <div style={{ fontSize: 12, color: "#5F5E5A" }}>{item.assignedTo}</div>
                <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 4 }}>
                  {chip(due, `${due.label}: ${item.dueDate}`)}
                  {chip(result, `Ergebnis: ${result.label}`)}
                  <span style={{ fontSize: 10, color: "#888780" }}>Kosten: {item.cost}</span>
                </div>
                <div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
                  <button onClick={(e) => { e.stopPropagation(); alert(`→ IS-03: ${item.id}`); }} style={buttonStyle}>Öffnen</button>
                  {item.status !== "completed" && item.status !== "cancelled" && (
                    <button onClick={(e) => { e.stopPropagation(); alert(`→ IS-04: ${item.id}`); }} style={buttonStyle}>Bearbeiten</button>
                  )}
                  {item.status === "in_progress" || item.status === "open" ? (
                    <button onClick={(e) => { e.stopPropagation(); alert(`→ IS-05: ${item.id}`); }} style={primaryButtonStyle}>Abschliessen</button>
                  ) : null}
                  {critical && (
                    <button onClick={(e) => { e.stopPropagation(); alert(`→ IS-06: ${item.id}`); }} style={dangerButtonStyle}>Prüfen</button>
                  )}
                  {item.status === "completed" && (
                    <button onClick={(e) => { e.stopPropagation(); alert(`→ IS-07: ${item.equipment}`); }} style={buttonStyle}>Historie</button>
                  )}
                </div>
              </div>
            );
          })}
        </div>

        <div style={{ display: "flex", justifyContent: "space-between", marginTop: 12, fontSize: 11, color: "#888780" }}>
          <span>{filtered.length} von {SERVICES.length} Servicevorgängen angezeigt</span>
          <span>V1: generischer Serviceworkflow · QR optional · Dokumente / Ersatzteile später</span>
        </div>

        <div style={{ marginTop: 16, padding: "10px 14px", background: "#FAEEDA", border: "1px solid #FAC775", borderRadius: 8, fontSize: 11, color: "#BA7517" }}>
          <strong>Wireframe-Simulation:</strong> Suche, Filter und Schnellfilter sind funktional. Die Serviceobjekt-Liste ist bewusst nicht abschliessend; neue Objekte können über Equipment + generischen Inhouse-Service ergänzt werden.
        </div>
      </div>
    </div>
  );
}

const selectStyle = {
  padding: "7px 12px",
  fontSize: 13,
  border: "1px solid #B4B2A9",
  borderRadius: 6,
  background: "#fff",
  outline: "none",
};

const buttonStyle = {
  fontSize: 11,
  padding: "3px 8px",
  background: "transparent",
  border: "1px solid #B4B2A9",
  borderRadius: 4,
  cursor: "pointer",
  color: "#5F5E5A",
};

const primaryButtonStyle = {
  fontSize: 11,
  padding: "3px 8px",
  background: "#185FA5",
  border: "1px solid #185FA5",
  borderRadius: 4,
  cursor: "pointer",
  color: "#FFFFFF",
};

const dangerButtonStyle = {
  fontSize: 11,
  padding: "3px 8px",
  background: "#FCEBEB",
  border: "1px solid #A32D2D",
  borderRadius: 4,
  cursor: "pointer",
  color: "#A32D2D",
};

function QuickFilter({ label, onClick }) {
  return (
    <button onClick={onClick}
      style={{ fontSize: 11, padding: "5px 10px", background: "#fff", border: "1px solid #D3D1C7", borderRadius: 14, color: "#5F5E5A", cursor: "pointer" }}>
      {label}
    </button>
  );
}