import { useMemo, useState } from "react";

const service = {
  id: "IS-2026-005",
  serviceType: "Jacket-Service",
  equipment: "Jacket Ocean Pro",
  inventory: "BCD-018",
  owner: "Intern",
  status: "rework_required",
  dueDate: "02.05.2026",
  assignedTo: "Maria",
};

const resultOptions = {
  rework_required: { label: "Nacharbeit erforderlich", bg: "#FCEBEB", color: "#A32D2D" },
  failed: { label: "Nicht bestanden", bg: "#FCEBEB", color: "#A32D2D" },
  blocked: { label: "Equipment sperren", bg: "#FCEBEB", color: "#A32D2D" },
  resolved: { label: "Nacharbeit erledigt", bg: "#EAF3DE", color: "#3B6D11" },
};

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 IS06NacharbeitNichtBestanden() {
  const [result, setResult] = useState("rework_required");
  const [assignedTo, setAssignedTo] = useState(service.assignedTo);
  const [reason, setReason] = useState("");
  const [action, setAction] = useState("");
  const [targetDate, setTargetDate] = useState("2026-05-15");
  const [equipmentHint, setEquipmentHint] = useState("needs_review");
  const [saved, setSaved] = useState(false);

  const checks = useMemo(() => [
    { label: "Ergebnis gesetzt", ok: Boolean(result) },
    { label: "Grund erfasst", ok: reason.trim().length > 0 },
    { label: "Massnahme erfasst", ok: action.trim().length > 0 },
    { label: "Zieltermin geprüft", ok: Boolean(targetDate) },
  ], [result, reason, action, targetDate]);

  const canSave = checks.every((check) => check.ok);
  const selected = resultOptions[result];

  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 }}>
        <span style={{ fontWeight: 700, color: "#fff" }}>DiveLogix360</span>
        <span style={{ color: "#888780" }}>Tenant-Portal</span>
        <span style={{ marginLeft: "auto", color: "#fff", borderBottom: "1px solid #185FA5", paddingBottom: 2 }}>Inhouse-Service</span>
      </div>

      <div style={{ padding: "20px 24px" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 18 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <button onClick={() => alert("→ IS-03")} style={backButtonStyle}>← Zurück</button>
            <h1 style={{ fontSize: 20, fontWeight: 500, margin: 0 }}>Nacharbeit / nicht bestanden</h1>
            <span style={{ background: "#E6F1FB", color: "#185FA5", fontSize: 11, fontWeight: 500, padding: "2px 8px", borderRadius: 20 }}>IS-06</span>
            {chip(selected, selected.label)}
          </div>
          <button disabled={!canSave} onClick={() => setSaved(true)} style={canSave ? dangerButtonStyle : disabledButtonStyle}>Nacharbeit speichern</button>
        </div>

        <div style={{ ...cardStyle, marginBottom: 18 }}>
          <div style={{ fontSize: 18, fontWeight: 700 }}>{service.id} · {service.serviceType}</div>
          <div style={{ fontSize: 13, color: "#5F5E5A", marginTop: 5 }}>{service.equipment} · {service.owner} · INV {service.inventory} · überfällig seit {service.dueDate}</div>
          <div style={{ display: "flex", gap: 6, marginTop: 10 }}>{chip({ bg: "#FCEBEB", color: "#A32D2D" }, "Nacharbeit")}{chip({ bg: "#FCEBEB", color: "#A32D2D" }, "Überfällig")}</div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 18 }}>
          <div style={cardStyle}>
            <h2 style={sectionTitleStyle}>Kritisches Ergebnis</h2>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
              <Field label="Ergebnis *">
                <select value={result} onChange={(e) => { setResult(e.target.value); setSaved(false); }} style={inputStyle}>
                  <option value="rework_required">Nacharbeit erforderlich</option>
                  <option value="failed">Nicht bestanden</option>
                  <option value="blocked">Equipment sperren</option>
                  <option value="resolved">Nacharbeit erledigt</option>
                </select>
              </Field>
              <Field label="Verantwortlicher">
                <select value={assignedTo} onChange={(e) => { setAssignedTo(e.target.value); setSaved(false); }} style={inputStyle}>
                  <option>David</option>
                  <option>Maria</option>
                  <option>Nicht zugewiesen</option>
                </select>
              </Field>
            </div>
            <Field label="Grund *">
              <textarea value={reason} onChange={(e) => { setReason(e.target.value); setSaved(false); }} placeholder="z. B. Inflator undicht, Ablassventil klemmt..." style={{ ...inputStyle, height: 82, resize: "vertical" }} />
            </Field>
            <Field label="Massnahme *">
              <textarea value={action} onChange={(e) => { setAction(e.target.value); setSaved(false); }} placeholder="z. B. Inflator ersetzen, danach erneute Dichtheitsprüfung..." style={{ ...inputStyle, height: 82, resize: "vertical" }} />
            </Field>
            <div style={{ display: "grid", gridTemplateColumns: "220px 1fr", gap: 12 }}>
              <Field label="Zieltermin">
                <input type="date" value={targetDate} onChange={(e) => { setTargetDate(e.target.value); setSaved(false); }} style={inputStyle} />
              </Field>
              <Field label="Equipment-Hinweis">
                <select value={equipmentHint} onChange={(e) => { setEquipmentHint(e.target.value); setSaved(false); }} style={inputStyle}>
                  <option value="needs_review">prüfbedürftig / nicht ausgeben</option>
                  <option value="blocked">gesperrt</option>
                  <option value="internal_review">intern klären</option>
                  <option value="none">kein Hinweis</option>
                </select>
              </Field>
            </div>
            {saved && <Notice tone="success" title="Gespeichert" text="Nacharbeit wurde simuliert gespeichert und würde in IS-01 kritisch angezeigt." />}
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
            <div style={cardStyle}>
              <h2 style={sectionTitleStyle}>Prüfung</h2>
              {checks.map((check) => <div key={check.label} style={{ background: check.ok ? "#EAF3DE" : "#FAEEDA", color: check.ok ? "#3B6D11" : "#BA7517", borderRadius: 8, padding: "8px 10px", fontSize: 12, marginBottom: 8 }}>{check.ok ? "✓" : "!"} {check.label}</div>)}
            </div>
            <div style={cardStyle}>
              <h2 style={sectionTitleStyle}>Folgewirkung</h2>
              <div style={{ background: selected.bg, color: selected.color, borderRadius: 8, padding: "8px 10px", fontSize: 12, marginBottom: 8 }}>Ziel: {selected.label}</div>
              <div style={{ background: "#E6F1FB", color: "#185FA5", borderRadius: 8, padding: "8px 10px", fontSize: 12, marginBottom: 8 }}>Vorgang erscheint kritisch in IS-01.</div>
              <div style={{ background: "#F1EFE8", color: "#5F5E5A", borderRadius: 8, padding: "8px 10px", fontSize: 12 }}>Abschluss später über IS-05.</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Field({ label, children }) { return <label style={{ display: "flex", flexDirection: "column", gap: 5, fontSize: 12, fontWeight: 600, color: "#5F5E5A", marginBottom: 10 }}>{label}{children}</label>; }
function Notice({ tone = "warning", title, text }) { const s = tone === "success" ? { bg: "#EAF3DE", border: "#C8E3B7", color: "#3B6D11" } : { bg: "#FAEEDA", border: "#FAC775", color: "#BA7517" }; return <div style={{ background: s.bg, border: `1px solid ${s.border}`, color: s.color, borderRadius: 8, padding: "9px 12px", fontSize: 12, marginTop: 8 }}><strong>{title}:</strong> {text}</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 inputStyle = { padding: "8px 12px", fontSize: 13, border: "1px solid #B4B2A9", borderRadius: 6, background: "#fff", outline: "none" };
const backButtonStyle = { padding: "6px 10px", fontSize: 12, background: "transparent", border: "1px solid #B4B2A9", borderRadius: 6, color: "#5F5E5A", cursor: "pointer" };
const dangerButtonStyle = { padding: "8px 14px", fontSize: 13, background: "#A32D2D", border: "1px solid #A32D2D", borderRadius: 6, color: "#fff", cursor: "pointer", fontWeight: 600 };
const disabledButtonStyle = { padding: "8px 14px", fontSize: 13, background: "#B4B2A9", border: "1px solid #B4B2A9", borderRadius: 6, color: "#fff", cursor: "not-allowed", fontWeight: 600 };