import { useState } from "react";

const service = {
  id: "IS-2026-004",
  serviceType: "Atemregler-Service",
  serviceObject: "Atemregler",
  equipment: "Atemregler Set A1",
  manufacturer: "Apeks",
  model: "XTX50",
  serial: "APX-7712",
  inventory: "REG-001",
  ownerType: "customer",
  owner: "Max Muster",
  location: "Werkstatt",
  equipmentStatus: "active",
  quality: "complete",
  status: "in_progress",
  dueStatus: "due_soon",
  dueDate: "15.05.2026",
  plannedDate: "08.05.2026",
  priority: "normal",
  result: "open",
  assignedTo: "David",
  createdBy: "David",
  createdAt: "08.05.2026 · 13:40",
  updatedAt: "08.05.2026 · 14:20",
  cost: "noch nicht erfasst",
  resultDate: "—",
};

const notes = [
  {
    type: "Startnotiz",
    text: "Kunde meldet leichtes Abblasen an der zweiten Stufe.",
    by: "David",
    at: "08.05.2026 · 13:40",
  },
  {
    type: "Bearbeitungsnotiz",
    text: "Sichtprüfung durchgeführt, Mitteldruckprüfung folgt.",
    by: "David",
    at: "08.05.2026 · 14:20",
  },
];

const history = [
  {
    title: "Servicevorgang erstellt",
    detail: "Workflow wurde für Atemregler Set A1 angelegt.",
    by: "David",
    at: "08.05.2026 · 13:40",
    tone: "blue",
  },
  {
    title: "Status geändert: Offen → In Arbeit",
    detail: "Service wurde zur Bearbeitung übernommen.",
    by: "David",
    at: "08.05.2026 · 14:05",
    tone: "purple",
  },
  {
    title: "Bearbeitungsnotiz ergänzt",
    detail: "Sichtprüfung durchgeführt, Mitteldruckprüfung folgt.",
    by: "David",
    at: "08.05.2026 · 14:20",
    tone: "orange",
  },
];

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 equipmentStatusStyles = {
  active: { label: "Aktiv", bg: "#EAF3DE", color: "#3B6D11" },
  inactive: { label: "Inaktiv", bg: "#F1EFE8", color: "#5F5E5A" },
  archived: { label: "Archiviert", bg: "#FCEBEB", color: "#A32D2D" },
};

const qualityStyles = {
  complete: { label: "Vollständig", bg: "#EAF3DE", color: "#3B6D11" },
  incomplete: { label: "Unvollständig", bg: "#FAEEDA", color: "#BA7517" },
  needs_review: { label: "Prüfung nötig", bg: "#FCEBEB", color: "#A32D2D" },
};

const toneColors = {
  blue: "#185FA5",
  purple: "#534AB7",
  orange: "#BA7517",
  green: "#3B6D11",
  red: "#A32D2D",
};

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 IS03ServicevorgangDetail() {
  const [showSystemInfo, setShowSystemInfo] = useState(false);
  const status = statusStyles[service.status];
  const due = dueStyles[service.dueStatus];
  const result = resultStyles[service.result];
  const isEditable = !["completed", "cancelled", "corrected"].includes(service.status);

  return (
    <div style={{ fontFamily: "var(--font-sans, system-ui)", background: "#F1EFE8", minHeight: 760, 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 }}>
            <button onClick={() => alert("→ IS-01: zurück zur Übersicht")} style={backButtonStyle}>← Zurück</button>
            <h1 style={{ fontSize: 20, fontWeight: 500, color: "#1a1a18", margin: 0 }}>Servicevorgang Detail</h1>
            <span style={{ background: "#E6F1FB", color: "#185FA5", fontSize: 11, fontWeight: 500, padding: "2px 8px", borderRadius: 20 }}>IS-03</span>
            {chip(status, status.label)}
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <button onClick={() => alert("→ IS-04: Service bearbeiten")} disabled={!isEditable} style={isEditable ? secondaryButtonStyle : disabledButtonStyle}>Bearbeiten</button>
            <button onClick={() => alert("→ IS-05: Service abschliessen")} disabled={!isEditable} style={isEditable ? primaryButtonStyle : disabledPrimaryButtonStyle}>Abschliessen</button>
            <button onClick={() => alert("→ IS-06: Nacharbeit / nicht bestanden")} disabled={!isEditable} style={isEditable ? dangerButtonStyle : disabledButtonStyle}>Prüfen</button>
          </div>
        </div>

        <div style={{ ...cardStyle, marginBottom: 18 }}>
          <div style={{ display: "flex", justifyContent: "space-between", gap: 20 }}>
            <div>
              <div style={{ fontSize: 18, fontWeight: 700, color: "#1a1a18" }}>{service.id} · {service.serviceType}</div>
              <div style={{ fontSize: 13, color: "#5F5E5A", marginTop: 5 }}>{service.equipment} · {service.owner} · fällig am {service.dueDate}</div>
              <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginTop: 10 }}>
                {chip(status, status.label)}
                {chip(due, due.label)}
                {chip(result, `Ergebnis: ${result.label}`)}
              </div>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 120px)", gap: 12, fontSize: 12 }}>
              <Meta label="Erstellt" value={service.createdAt} />
              <Meta label="Verantwortlich" value={service.assignedTo} />
              <Meta label="Priorität" value="Normal" />
            </div>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.05fr", gap: 18 }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
            <div style={cardStyle}>
              <h2 style={sectionTitleStyle}>Equipment- und Kundenkontext</h2>
              <div style={{ fontSize: 15, fontWeight: 600, color: "#1a1a18" }}>{service.equipment}</div>
              <div style={{ fontSize: 12, color: "#5F5E5A", marginTop: 5 }}>{service.serviceObject} · {service.manufacturer} {service.model}</div>
              <div style={{ fontSize: 12, color: "#5F5E5A", marginTop: 5 }}>SN {service.serial} · INV {service.inventory}</div>
              <div style={{ fontSize: 12, color: "#5F5E5A", marginTop: 5 }}>{service.ownerType === "customer" ? "Kunde" : "Intern"}: {service.owner} · Standort: {service.location}</div>
              <div style={{ display: "flex", gap: 6, marginTop: 12, flexWrap: "wrap" }}>
                {chip(equipmentStatusStyles[service.equipmentStatus], equipmentStatusStyles[service.equipmentStatus].label)}
                {chip(qualityStyles[service.quality], qualityStyles[service.quality].label)}
              </div>
              <div style={{ marginTop: 14, display: "flex", gap: 8 }}>
                <button onClick={() => alert("→ UC01: Equipment-Detail öffnen")} style={secondaryButtonStyle}>Equipment öffnen</button>
                <button onClick={() => alert("→ IS-07: Servicehistorie je Equipment")} style={secondaryButtonStyle}>Historie öffnen</button>
              </div>
            </div>

            <div style={cardStyle}>
              <h2 style={sectionTitleStyle}>Notizen</h2>
              {notes.map((note, index) => (
                <div key={`${note.type}-${index}`} style={{ background: "#F1EFE8", borderRadius: 8, padding: "10px 12px", marginBottom: index < notes.length - 1 ? 10 : 0 }}>
                  <div style={{ fontSize: 11, fontWeight: 700, color: "#888780", textTransform: "uppercase", letterSpacing: 0.4 }}>{note.type}</div>
                  <div style={{ fontSize: 13, color: "#1a1a18", marginTop: 6 }}>{note.text}</div>
                  <div style={{ fontSize: 11, color: "#888780", marginTop: 6 }}>{note.at} · {note.by}</div>
                </div>
              ))}
            </div>
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
            <div style={cardStyle}>
              <h2 style={sectionTitleStyle}>Serviceinformationen</h2>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14 }}>
                <Meta label="Serviceobjekt" value={service.serviceObject} />
                <Meta label="Serviceart" value={service.serviceType} />
                <Meta label="Status" value={status.label} />
                <Meta label="Geplantes Datum" value={service.plannedDate} />
                <Meta label="Frist" value={`${service.dueDate} · ${due.label}`} tone={due.color} />
                <Meta label="Ergebnis" value={result.label} />
                <Meta label="Kosten" value={service.cost} />
                <Meta label="Ergebnisdatum" value={service.resultDate} />
                <Meta label="Letzte Änderung" value={service.updatedAt} />
              </div>
              <button onClick={() => setShowSystemInfo(!showSystemInfo)} style={{ ...secondaryButtonStyle, marginTop: 14 }}>
                {showSystemInfo ? "Systeminfos ausblenden" : "Systeminfos anzeigen"}
              </button>
              {showSystemInfo && (
                <div style={{ marginTop: 10, padding: "10px 12px", background: "#F1EFE8", borderRadius: 8, fontSize: 12, color: "#5F5E5A" }}>
                  Workflow-Typ: <strong>inhouse_service</strong><br />
                  Tenant-Isolation: <strong>aktiv</strong><br />
                  Änderungsmodus: <strong>direkte Bearbeitung erlaubt, solange nicht abgeschlossen</strong>
                </div>
              )}
            </div>

            <div style={cardStyle}>
              <h2 style={sectionTitleStyle}>Workflow-Historie</h2>
              <div style={{ position: "relative", paddingLeft: 22 }}>
                <div style={{ position: "absolute", left: 7, top: 8, bottom: 8, width: 2, background: "#D3D1C7" }} />
                {history.map((entry, index) => (
                  <div key={entry.title} style={{ position: "relative", marginBottom: index < history.length - 1 ? 18 : 0 }}>
                    <div style={{ position: "absolute", left: -20, top: 3, width: 14, height: 14, borderRadius: "50%", background: toneColors[entry.tone] }} />
                    <div style={{ fontSize: 13, fontWeight: 700, color: "#1a1a18" }}>{entry.title}</div>
                    <div style={{ fontSize: 12, color: "#5F5E5A", marginTop: 3 }}>{entry.detail}</div>
                    <div style={{ fontSize: 11, color: "#888780", marginTop: 3 }}>{entry.at} · {entry.by}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        <div style={{ marginTop: 16, padding: "10px 14px", background: "#E6F1FB", border: "1px solid #B5D4F4", borderRadius: 8, fontSize: 11, color: "#185FA5" }}>
          <strong>Wireframe-Simulation:</strong> IS-03 ist die zentrale Detailansicht. Bearbeitung erfolgt über IS-04, Abschluss über IS-05, Nacharbeit über IS-06 und Historie über IS-07.
        </div>
      </div>
    </div>
  );
}

function Meta({ label, value, tone }) {
  return (
    <div>
      <div style={{ fontSize: 10, fontWeight: 700, color: "#888780", textTransform: "uppercase", letterSpacing: 0.4 }}>{label}</div>
      <div style={{ fontSize: 13, color: tone || "#1a1a18", marginTop: 4, lineHeight: 1.35 }}>{value}</div>
    </div>
  );
}

const cardStyle = {
  background: "#fff",
  border: "1px solid #D3D1C7",
  borderRadius: 8,
  padding: 18,
};

const sectionTitleStyle = {
  fontSize: 16,
  fontWeight: 600,
  color: "#1a1a18",
  margin: "0 0 14px 0",
};

const secondaryButtonStyle = {
  padding: "8px 12px",
  fontSize: 13,
  background: "#fff",
  border: "1px solid #B4B2A9",
  borderRadius: 6,
  color: "#5F5E5A",
  cursor: "pointer",
  fontWeight: 500,
};

const primaryButtonStyle = {
  padding: "8px 14px",
  fontSize: 13,
  background: "#185FA5",
  border: "1px solid #185FA5",
  borderRadius: 6,
  color: "#fff",
  cursor: "pointer",
  fontWeight: 600,
};

const dangerButtonStyle = {
  padding: "8px 12px",
  fontSize: 13,
  background: "#FCEBEB",
  border: "1px solid #A32D2D",
  borderRadius: 6,
  color: "#A32D2D",
  cursor: "pointer",
  fontWeight: 600,
};

const disabledButtonStyle = {
  padding: "8px 12px",
  fontSize: 13,
  background: "#F1EFE8",
  border: "1px solid #D3D1C7",
  borderRadius: 6,
  color: "#888780",
  cursor: "not-allowed",
  fontWeight: 500,
};

const disabledPrimaryButtonStyle = {
  padding: "8px 14px",
  fontSize: 13,
  background: "#B4B2A9",
  border: "1px solid #B4B2A9",
  borderRadius: 6,
  color: "#fff",
  cursor: "not-allowed",
  fontWeight: 600,
};

const backButtonStyle = {
  padding: "6px 10px",
  fontSize: 12,
  background: "transparent",
  border: "1px solid #B4B2A9",
  borderRadius: 6,
  color: "#5F5E5A",
  cursor: "pointer",
};