import { FormEvent, ReactNode, useEffect, useRef, useState } from "react";

import CycleBarChart from "./components/CycleBarChart";
import KpiBlock from "./components/KpiBlock";
import MachineCard from "./components/MachineCard";
import Panel from "./components/Panel";
import StatusBadge from "./components/StatusBadge";
import { fetchJson, patchJson, postJson, WS_URL } from "./lib/api";
import { Cycle, DailyOee, DashboardSnapshot, Downtime, MachineEvent, ProductionOrder, ReferenceData, Scrap } from "./lib/types";

type DetailState = {
  events: MachineEvent[];
  cycles: Cycle[];
  downtimes: Downtime[];
};

type ToastKey = "config" | "order" | "downtime" | "scrap";
type ModuleKey = "atelier" | "machine" | "trs" | "orders" | "downtimes" | "scrap" | "config";
type FormErrors = Record<ToastKey, Record<string, string>>;
type FormControl = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;

const today = new Date().toISOString().slice(0, 10);
const initialFormErrors: FormErrors = {
  config: {},
  order: {},
  downtime: {},
  scrap: {},
};

const moduleTabs: Array<{ key: ModuleKey; label: string; description: string }> = [
  { key: "atelier", label: "Atelier", description: "Vue machines" },
  { key: "machine", label: "Machine", description: "Cycles et evenements" },
  { key: "trs", label: "TRS", description: "Performance jour" },
  { key: "orders", label: "OF", description: "Ordres fabrication" },
  { key: "downtimes", label: "Arrets", description: "Qualification" },
  { key: "scrap", label: "Rebuts", description: "Declaration" },
  { key: "config", label: "Config", description: "Parametrage signal" },
];

export default function App() {
  const [dashboard, setDashboard] = useState<DashboardSnapshot | null>(null);
  const [orders, setOrders] = useState<ProductionOrder[]>([]);
  const [openDowntimes, setOpenDowntimes] = useState<Downtime[]>([]);
  const [scraps, setScraps] = useState<Scrap[]>([]);
  const [references, setReferences] = useState<ReferenceData | null>(null);
  const [dailyOee, setDailyOee] = useState<DailyOee | null>(null);
  const [selectedMachineId, setSelectedMachineId] = useState<number | null>(null);
  const [activeModule, setActiveModule] = useState<ModuleKey>("atelier");
  const [machineFilter, setMachineFilter] = useState("all");
  const [machineSort, setMachineSort] = useState("code");
  const [isWorkshopMode, setIsWorkshopMode] = useState(false);
  const [nowMs, setNowMs] = useState(Date.now());
  const [detail, setDetail] = useState<DetailState>({ events: [], cycles: [], downtimes: [] });
  const [connectionStatus, setConnectionStatus] = useState("Connecting");
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
  const [formErrors, setFormErrors] = useState<FormErrors>(initialFormErrors);
  const [actionErrors, setActionErrors] = useState<Record<ToastKey, string | null>>({
    config: null,
    order: null,
    downtime: null,
    scrap: null,
  });
  const [toasts, setToasts] = useState<Record<ToastKey, string | null>>({
    config: null,
    order: null,
    downtime: null,
    scrap: null,
  });
  const refreshTimer = useRef<number | null>(null);
  const toastTimers = useRef<Record<string, number>>({});

  async function loadDashboard() {
    const snapshot = await fetchJson<DashboardSnapshot>("/api/dashboard");
    setDashboard(snapshot);
    if (selectedMachineId === null && snapshot.machines.length > 0) {
      setSelectedMachineId(snapshot.machines[0].id);
    }
  }

  async function loadCollections() {
    const [loadedOrders, loadedOpenDowntimes, loadedScraps, loadedReferences, loadedDailyOee] = await Promise.all([
      fetchJson<ProductionOrder[]>("/api/production-orders"),
      fetchJson<Downtime[]>("/api/downtimes/open"),
      fetchJson<Scrap[]>("/api/scraps"),
      fetchJson<ReferenceData>("/api/reference-data"),
      fetchJson<DailyOee>(`/api/oee/daily?date=${today}`),
    ]);

    setOrders(loadedOrders);
    setOpenDowntimes(loadedOpenDowntimes);
    setScraps(loadedScraps);
    setReferences(loadedReferences);
    setDailyOee(loadedDailyOee);
  }

  async function loadDetail(machineId: number) {
    const [events, cycles, downtimes] = await Promise.all([
      fetchJson<MachineEvent[]>(`/api/machines/${machineId}/events`),
      fetchJson<Cycle[]>(`/api/machines/${machineId}/cycles`),
      fetchJson<Downtime[]>(`/api/machines/${machineId}/downtimes`),
    ]);

    setDetail({ events, cycles, downtimes });
  }

  async function loadAll() {
    setErrorMessage(null);
    await Promise.all([loadDashboard(), loadCollections()]);
  }

  function showToast(key: ToastKey, message: string) {
    window.clearTimeout(toastTimers.current[key]);
    setToasts((current) => ({ ...current, [key]: message }));
    toastTimers.current[key] = window.setTimeout(() => {
      setToasts((current) => ({ ...current, [key]: null }));
    }, 3000);
  }

  useEffect(() => {
    loadAll().catch((error: Error) => {
      setErrorMessage(error.message);
      setConnectionStatus("Load failed");
    });
  }, []);

  useEffect(() => {
    const timer = window.setInterval(() => setNowMs(Date.now()), 30000);
    return () => window.clearInterval(timer);
  }, []);

  useEffect(() => {
    if (selectedMachineId === null) {
      return;
    }
    loadDetail(selectedMachineId).catch((error: Error) => setErrorMessage(error.message));
  }, [selectedMachineId]);

  useEffect(() => {
    let socket: WebSocket | null = null;
    let reconnectTimer: number | null = null;
    let attempt = 0;
    let isDisposed = false;

    function connect() {
      socket = new WebSocket(WS_URL);
      socket.onopen = () => {
        attempt = 0;
        setConnectionStatus("Live");
      };
      socket.onclose = () => {
        if (isDisposed) {
          return;
        }
        setConnectionStatus("Reconnecting");
        const delayMs = Math.min(30000, 1000 * 2 ** attempt);
        attempt += 1;
        reconnectTimer = window.setTimeout(connect, delayMs);
      };
      socket.onerror = () => setConnectionStatus("Reconnecting");
      socket.onmessage = (event) => {
        const message = JSON.parse(event.data) as { type: string; data?: DashboardSnapshot };
        if (message.type === "snapshot" && message.data) {
          setDashboard(message.data);
          return;
        }

        if (refreshTimer.current) {
          window.clearTimeout(refreshTimer.current);
        }
        refreshTimer.current = window.setTimeout(() => {
          loadAll().catch((error: Error) => setErrorMessage(error.message));
          if (selectedMachineId !== null) {
            loadDetail(selectedMachineId).catch((error: Error) => setErrorMessage(error.message));
          }
        }, 300);
      };
    }

    connect();

    return () => {
      isDisposed = true;
      if (refreshTimer.current) {
        window.clearTimeout(refreshTimer.current);
      }
      if (reconnectTimer) {
        window.clearTimeout(reconnectTimer);
      }
      socket?.close();
    };
  }, [selectedMachineId]);

  const selectedMachine = dashboard?.machines.find((machine) => machine.id === selectedMachineId) ?? null;
  const machines = dashboard?.machines ?? [];
  const summaryMetrics = {
    production: machines.filter((machine) => machine.status === "production").length,
    openDowntimes: openDowntimes.length,
    producedQty: machines.reduce((total, machine) => total + machine.produced_qty, 0),
    scrapQty: machines.reduce((total, machine) => total + machine.scrap_qty, 0),
    oee: Math.round((dailyOee?.overall.oee ?? 0) * 100),
  };
  const machineStatuses = Array.from(new Set(machines.map((machine) => machine.status))).sort();
  const visibleMachines = [...machines]
    .filter((machine) => machineFilter === "all" || machine.status === machineFilter)
    .sort((left, right) => {
      if (machineSort === "oee") {
        return right.today_oee.oee - left.today_oee.oee;
      }
      if (machineSort === "stops") {
        return Number(Boolean(right.open_downtime)) - Number(Boolean(left.open_downtime));
      }
      return left.code.localeCompare(right.code);
    });

  function getFormControls(form: HTMLFormElement) {
    return Array.from(form.elements).filter((element): element is FormControl => {
      return element instanceof HTMLInputElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement;
    });
  }

  function validateForm(form: HTMLFormElement, key: ToastKey) {
    const nextErrors: Record<string, string> = {};
    getFormControls(form).forEach((control) => {
      if (!control.name || control.disabled || control.type === "submit" || control.type === "button") {
        return;
      }
      if (!control.checkValidity()) {
        nextErrors[control.name] = control.validationMessage || "Invalid value.";
      }
    });
    setFormErrors((current) => ({ ...current, [key]: nextErrors }));
    return Object.keys(nextErrors).length === 0;
  }

  function handleFormBlur(key: ToastKey, form: HTMLFormElement) {
    validateForm(form, key);
  }

  function fieldError(key: ToastKey, name: string) {
    const message = formErrors[key][name];
    return message ? <span className="field-error">{message}</span> : null;
  }

  function actionError(key: ToastKey) {
    return actionErrors[key] ? <div className="inline-error">{actionErrors[key]}</div> : null;
  }

  async function submitOrder(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const form = event.currentTarget;
    if (!validateForm(form, "order")) {
      return;
    }
    const formData = new FormData(form);

    try {
      setActionErrors((current) => ({ ...current, order: null }));
      await postJson("/api/production-orders", {
        order_number: formData.get("order_number"),
        machine_id: Number(formData.get("machine_id")),
        article_ref: formData.get("article_ref"),
        article_name: formData.get("article_name"),
        mold_ref: formData.get("mold_ref"),
        material_ref: formData.get("material_ref"),
        planned_qty: Number(formData.get("planned_qty")),
        cavities: Number(formData.get("cavities")),
        theoretical_cycle_time_sec: Number(formData.get("theoretical_cycle_time_sec")),
      });

      form.reset();
      setFormErrors((current) => ({ ...current, order: {} }));
      showToast("order", "Production order created.");
      await loadAll();
    } catch (error) {
      setActionErrors((current) => ({ ...current, order: error instanceof Error ? error.message : "Order creation failed." }));
    }
  }

  async function submitDowntimeQualification(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const form = event.currentTarget;
    if (!validateForm(form, "downtime")) {
      return;
    }
    const formData = new FormData(form);

    try {
      setActionErrors((current) => ({ ...current, downtime: null }));
      await postJson(`/api/downtimes/${formData.get("downtime_id")}/qualify`, {
        reason_code: formData.get("reason_code"),
        comment: formData.get("comment"),
        qualified_by: formData.get("qualified_by"),
      });

      form.reset();
      setFormErrors((current) => ({ ...current, downtime: {} }));
      showToast("downtime", "Downtime qualified.");
      await loadAll();
      if (selectedMachineId !== null) {
        await loadDetail(selectedMachineId);
      }
    } catch (error) {
      setActionErrors((current) => ({ ...current, downtime: error instanceof Error ? error.message : "Downtime qualification failed." }));
    }
  }

  async function submitScrap(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (!selectedMachine) {
      setActionErrors((current) => ({ ...current, scrap: "Select a machine before declaring scrap." }));
      return;
    }
    const form = event.currentTarget;
    if (!validateForm(form, "scrap")) {
      return;
    }
    const formData = new FormData(form);

    try {
      setActionErrors((current) => ({ ...current, scrap: null }));
      await postJson("/api/scraps", {
        machine_id: selectedMachine.code,
        production_order_id: selectedMachine.active_order?.id ?? null,
        quantity: Number(formData.get("quantity")),
        reason_code: formData.get("reason_code"),
        comment: formData.get("comment"),
        operator_name: formData.get("operator_name"),
      });

      form.reset();
      setFormErrors((current) => ({ ...current, scrap: {} }));
      showToast("scrap", "Scrap declaration recorded.");
      await loadAll();
    } catch (error) {
      setActionErrors((current) => ({ ...current, scrap: error instanceof Error ? error.message : "Scrap declaration failed." }));
    }
  }

  async function changeOrderStatus(orderId: number, action: "start" | "pause" | "close") {
    try {
      setActionErrors((current) => ({ ...current, order: null }));
      await postJson(`/api/production-orders/${orderId}/${action}`);
      await loadAll();
    } catch (error) {
      setActionErrors((current) => ({ ...current, order: error instanceof Error ? error.message : "Order status change failed." }));
    }
  }

  async function submitMachineConfig(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (!selectedMachine) {
      setActionErrors((current) => ({ ...current, config: "Select a machine before saving configuration." }));
      return;
    }

    const form = event.currentTarget;
    if (!validateForm(form, "config")) {
      return;
    }

    const formData = new FormData(form);
    try {
      setActionErrors((current) => ({ ...current, config: null }));
      await patchJson(`/api/machines/${selectedMachine.id}/config`, {
        name: formData.get("name"),
        brand: formData.get("brand"),
        model: formData.get("model"),
        is_active: formData.get("is_active") === "on",
        cycle_signal_edge: formData.get("cycle_signal_edge"),
        debounce_ms: Number(formData.get("debounce_ms")),
        min_cycle_time_sec: Number(formData.get("min_cycle_time_sec")),
        max_cycle_time_sec: Number(formData.get("max_cycle_time_sec")),
        stop_detection_delay_sec: Number(formData.get("stop_detection_delay_sec")),
      });

      setFormErrors((current) => ({ ...current, config: {} }));
      showToast("config", "Machine configuration saved.");
      await loadAll();
      await loadDetail(selectedMachine.id);
    } catch (error) {
      setActionErrors((current) => ({ ...current, config: error instanceof Error ? error.message : "Machine configuration failed." }));
    }
  }

  function selectMachine(machineId: number, module: ModuleKey = activeModule) {
    setSelectedMachineId(machineId);
    setActiveModule(module);
    if (module !== "atelier") {
      setIsWorkshopMode(false);
    }
  }

  function renderEventLabel(item: MachineEvent) {
    if (item.event_type !== "digital_input_changed") {
      return item.event_type;
    }
    const inputName = String(item.payload.input_name ?? "input");
    const inputValue = String(item.payload.input_value ?? "");
    return `${inputName} -> ${inputValue}`;
  }

  function toast(key: ToastKey) {
    return toasts[key] ? <div className="inline-toast">{toasts[key]}</div> : null;
  }

  function renderModule(): ReactNode {
    if (activeModule === "atelier") {
      return (
        <Panel
          title="Dashboard Atelier"
          subtitle="Machine status"
          actions={
            <div className="panel-actions">
              <select value={machineFilter} onChange={(event) => setMachineFilter(event.target.value)} aria-label="Filter machines by status">
                <option value="all">All statuses</option>
                {machineStatuses.map((status) => (
                  <option key={status} value={status}>
                    {status}
                  </option>
                ))}
              </select>
              <select value={machineSort} onChange={(event) => setMachineSort(event.target.value)} aria-label="Sort machines">
                <option value="code">Sort by code</option>
                <option value="oee">Sort by OEE</option>
                <option value="stops">Stops first</option>
              </select>
              <button type="button" onClick={() => setIsWorkshopMode((current) => !current)}>
                {isWorkshopMode ? "Exit fullscreen" : "Fullscreen atelier"}
              </button>
            </div>
          }
        >
          <div className="machine-grid">
            {visibleMachines.map((machine) => (
              <MachineCard
                key={machine.id}
                machine={machine}
                selected={machine.id === selectedMachineId}
                nowMs={nowMs}
                onSelect={() => selectMachine(machine.id, "machine")}
                onCreateOrder={() => selectMachine(machine.id, "orders")}
                onDeclareScrap={() => selectMachine(machine.id, "scrap")}
                onQualifyDowntime={() => selectMachine(machine.id, "downtimes")}
              />
            ))}
          </div>
          {visibleMachines.length === 0 ? <div className="empty-state">No machines match the current filter.</div> : null}
        </Panel>
      );
    }

    if (activeModule === "machine") {
      return (
        <Panel title="Detail Machine" subtitle={selectedMachine ? selectedMachine.code : "Select a machine"}>
          {selectedMachine ? (
            <div className="detail-stack">
              <div className="metric-row">
                <KpiBlock label="Status" value={<StatusBadge status={selectedMachine.status} />} />
                <KpiBlock label="Current order" value={selectedMachine.active_order?.order_number ?? "None"} />
                <KpiBlock label="Avg. cycle" value={`${selectedMachine.cycle_real_avg_sec.toFixed(1)} s`} />
                <KpiBlock label="Daily OEE" value={`${Math.round(selectedMachine.today_oee.oee * 100)}%`} />
              </div>

              <div className="machine-context">
                <div>
                  <span className="meta-label">Machine</span>
                  <strong>
                    {selectedMachine.brand} {selectedMachine.model}
                  </strong>
                </div>
                <div>
                  <span className="meta-label">Signal setup</span>
                  <strong>
                    {selectedMachine.config.cycle_signal_edge} edge / {selectedMachine.config.debounce_ms} ms /{" "}
                    {selectedMachine.config.stop_detection_delay_sec} s
                  </strong>
                </div>
                <div>
                  <span className="meta-label">Good parts</span>
                  <strong>{selectedMachine.produced_qty - selectedMachine.scrap_qty}</strong>
                </div>
              </div>

              <section className="cycle-panel">
                <div className="cycle-panel__header">
                  <h3>Recent cycles</h3>
                  <span>{detail.cycles.length} samples</span>
                </div>
                <CycleBarChart cycles={detail.cycles} theoreticalCycleTimeSec={selectedMachine.active_order?.theoretical_cycle_time_sec ?? 0} />
              </section>

              <div className="detail-columns">
                <div>
                  <h3>Recent events</h3>
                  <ul className="list">
                    {detail.events.slice(0, 8).map((item) => (
                      <li key={item.id}>
                        <strong>{renderEventLabel(item)}</strong>
                        <span>{new Date(item.timestamp).toLocaleString()}</span>
                      </li>
                    ))}
                  </ul>
                </div>
                <div>
                  <h3>Downtime history</h3>
                  <ul className="list">
                    {detail.downtimes.slice(0, 8).map((item) => (
                      <li key={item.id}>
                        <strong>{item.reason_code ?? "Waiting qualification"}</strong>
                        <span>{new Date(item.start_time).toLocaleString()}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            </div>
          ) : (
            <p>No machine selected.</p>
          )}
        </Panel>
      );
    }

    if (activeModule === "trs") {
      return (
        <Panel title="Vue TRS Journalier" subtitle={today}>
          {dailyOee ? (
            <div className="module-grid module-grid--split">
              <div className="oee-grid">
                <KpiBlock label="OEE" value={`${Math.round(dailyOee.overall.oee * 100)}%`} tone="dark" />
                <KpiBlock label="Availability" value={`${Math.round(dailyOee.overall.availability * 100)}%`} />
                <KpiBlock label="Performance" value={`${Math.round(dailyOee.overall.performance * 100)}%`} />
                <KpiBlock label="Quality" value={`${Math.round(dailyOee.overall.quality * 100)}%`} />
              </div>
              <div className="oee-mini-list">
                {machines.map((machine) => (
                  <button key={machine.id} type="button" className="oee-mini-list__item" onClick={() => selectMachine(machine.id, "machine")}>
                    <span>{machine.code}</span>
                    <strong>{Math.round(machine.today_oee.oee * 100)}%</strong>
                  </button>
                ))}
              </div>
            </div>
          ) : null}
        </Panel>
      );
    }

    if (activeModule === "orders") {
      return (
        <Panel title="Ordres de Fabrication" subtitle="Create and manage production orders">
          <div className="module-grid module-grid--form-table">
            <form
              className="form-grid module-form"
              onSubmit={submitOrder}
              onBlurCapture={(event) => handleFormBlur("order", event.currentTarget)}
              onInputCapture={(event) => validateForm(event.currentTarget, "order")}
              onChangeCapture={(event) => validateForm(event.currentTarget, "order")}
              noValidate
            >
              <input name="order_number" placeholder="OF number" required />
              {fieldError("order", "order_number")}
              <select name="machine_id" required defaultValue={selectedMachine?.id ?? ""}>
                <option value="" disabled>
                  Machine
                </option>
                {machines.map((machine) => (
                  <option key={machine.id} value={machine.id}>
                    {machine.code}
                  </option>
                ))}
              </select>
              {fieldError("order", "machine_id")}
              <input name="article_ref" placeholder="Article ref" required />
              {fieldError("order", "article_ref")}
              <input name="article_name" placeholder="Article name" required />
              {fieldError("order", "article_name")}
              <input name="mold_ref" placeholder="Mold ref" />
              <input name="material_ref" placeholder="Material ref" />
              <input name="planned_qty" type="number" min="1" placeholder="Planned qty" required />
              {fieldError("order", "planned_qty")}
              <input name="cavities" type="number" min="1" defaultValue="1" placeholder="Cavities" required />
              {fieldError("order", "cavities")}
              <input name="theoretical_cycle_time_sec" type="number" min="1" step="0.1" placeholder="Theoretical cycle" required />
              {fieldError("order", "theoretical_cycle_time_sec")}
              <button type="submit" className="primary-button" disabled={Object.keys(formErrors.order).length > 0}>
                Create
              </button>
              {actionError("order")}
              {toast("order")}
            </form>

            <div className="table-wrap">
              <table>
                <thead>
                  <tr>
                    <th>OF</th>
                    <th>Machine</th>
                    <th>Article</th>
                    <th>Status</th>
                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {orders.map((order) => (
                    <tr key={order.id}>
                      <td>{order.order_number}</td>
                      <td>{order.machine_id}</td>
                      <td>{order.article_name}</td>
                      <td>{order.status}</td>
                      <td className="table-actions">
                        <button type="button" onClick={() => changeOrderStatus(order.id, "start")}>
                          Start
                        </button>
                        <button type="button" onClick={() => changeOrderStatus(order.id, "pause")}>
                          Pause
                        </button>
                        <button type="button" onClick={() => changeOrderStatus(order.id, "close")}>
                          Close
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </Panel>
      );
    }

    if (activeModule === "downtimes") {
      return (
        <Panel title="Qualification Arret" subtitle={`${openDowntimes.length} open downtime(s)`}>
          <div className="module-grid module-grid--form-table">
            <form
              className="form-grid module-form"
              onSubmit={submitDowntimeQualification}
              onBlurCapture={(event) => handleFormBlur("downtime", event.currentTarget)}
              onInputCapture={(event) => validateForm(event.currentTarget, "downtime")}
              onChangeCapture={(event) => validateForm(event.currentTarget, "downtime")}
              noValidate
            >
              <select name="downtime_id" required defaultValue="">
                <option value="" disabled>
                  Open downtime
                </option>
                {openDowntimes.map((downtime) => (
                  <option key={downtime.id} value={downtime.id}>
                    #{downtime.id} machine {downtime.machine_id}
                  </option>
                ))}
              </select>
              {fieldError("downtime", "downtime_id")}
              <select name="reason_code" required defaultValue="">
                <option value="" disabled>
                  Reason
                </option>
                {references?.downtime_reasons.map((reason) => (
                  <option key={reason.code} value={reason.code}>
                    {reason.label}
                  </option>
                ))}
              </select>
              {fieldError("downtime", "reason_code")}
              <input name="qualified_by" placeholder="Operator" required />
              {fieldError("downtime", "qualified_by")}
              <textarea name="comment" placeholder="Comment" rows={3} />
              <button type="submit" className="primary-button" disabled={Object.keys(formErrors.downtime).length > 0}>
                Qualify
              </button>
              {actionError("downtime")}
              {toast("downtime")}
            </form>

            <ul className="timeline-list">
              {openDowntimes.map((item) => (
                <li key={item.id}>
                  <div>
                    <strong>Machine {item.machine_id}</strong>
                    <span>Waiting qualification</span>
                  </div>
                  <time>{new Date(item.start_time).toLocaleString()}</time>
                </li>
              ))}
            </ul>
            {openDowntimes.length === 0 ? <div className="empty-state">No open downtime currently needs qualification.</div> : null}
          </div>
        </Panel>
      );
    }

    if (activeModule === "scrap") {
      return (
        <Panel title="Saisie Rebut" subtitle={selectedMachine?.code ?? "Select machine"}>
          <div className="module-grid module-grid--form-table">
            <form
              className="form-grid module-form"
              onSubmit={submitScrap}
              onBlurCapture={(event) => handleFormBlur("scrap", event.currentTarget)}
              onInputCapture={(event) => validateForm(event.currentTarget, "scrap")}
              onChangeCapture={(event) => validateForm(event.currentTarget, "scrap")}
              noValidate
            >
              <input name="operator_name" placeholder="Operator" required />
              {fieldError("scrap", "operator_name")}
              <input name="quantity" type="number" min="1" placeholder="Quantity" required />
              {fieldError("scrap", "quantity")}
              <select name="reason_code" required defaultValue="">
                <option value="" disabled>
                  Scrap reason
                </option>
                {references?.scrap_reasons.map((reason) => (
                  <option key={reason.code} value={reason.code}>
                    {reason.label}
                  </option>
                ))}
              </select>
              {fieldError("scrap", "reason_code")}
              <textarea name="comment" placeholder="Comment" rows={3} />
              <button type="submit" className="primary-button" disabled={!selectedMachine || Object.keys(formErrors.scrap).length > 0}>
                Record
              </button>
              {actionError("scrap")}
              {toast("scrap")}
            </form>

            <ul className="list">
              {scraps.slice(0, 12).map((scrap) => (
                <li key={scrap.id}>
                  <strong>
                    {scrap.quantity} pcs / {scrap.reason_code}
                  </strong>
                  <span>{new Date(scrap.timestamp).toLocaleString()}</span>
                </li>
              ))}
            </ul>
            {scraps.length === 0 ? <div className="empty-state">No scrap has been declared yet.</div> : null}
          </div>
        </Panel>
      );
    }

    return (
      <Panel title="Config Machine" subtitle={selectedMachine?.code ?? "No machine selected"}>
        {selectedMachine ? (
          <form
            className="form-grid config-form"
            onSubmit={submitMachineConfig}
            onBlurCapture={(event) => handleFormBlur("config", event.currentTarget)}
            onInputCapture={(event) => validateForm(event.currentTarget, "config")}
            onChangeCapture={(event) => validateForm(event.currentTarget, "config")}
            key={selectedMachine.id}
            noValidate
          >
            <input name="name" placeholder="Display name" defaultValue={selectedMachine.config.name} required />
            {fieldError("config", "name")}
            <input name="brand" placeholder="Brand" defaultValue={selectedMachine.config.brand ?? ""} />
            <input name="model" placeholder="Model" defaultValue={selectedMachine.config.model ?? ""} />
            <label className="checkbox-field">
              <input name="is_active" type="checkbox" defaultChecked={selectedMachine.config.is_active} />
              <span>Active on dashboard</span>
            </label>
            <select name="cycle_signal_edge" defaultValue={selectedMachine.config.cycle_signal_edge}>
              <option value="rising">Rising edge</option>
              <option value="falling">Falling edge</option>
            </select>
            <input name="debounce_ms" type="number" min="0" defaultValue={selectedMachine.config.debounce_ms} placeholder="Debounce ms" required />
            {fieldError("config", "debounce_ms")}
            <input
              name="min_cycle_time_sec"
              type="number"
              min="1"
              defaultValue={selectedMachine.config.min_cycle_time_sec}
              placeholder="Min cycle sec"
              required
            />
            {fieldError("config", "min_cycle_time_sec")}
            <input
              name="max_cycle_time_sec"
              type="number"
              min="1"
              defaultValue={selectedMachine.config.max_cycle_time_sec}
              placeholder="Max cycle sec"
              required
            />
            {fieldError("config", "max_cycle_time_sec")}
            <input
              name="stop_detection_delay_sec"
              type="number"
              min="1"
              defaultValue={selectedMachine.config.stop_detection_delay_sec}
              placeholder="Stop delay sec"
              required
            />
            {fieldError("config", "stop_detection_delay_sec")}
            <button type="submit" className="primary-button" disabled={Object.keys(formErrors.config).length > 0}>
              Save
            </button>
            {actionError("config")}
            {toast("config")}
          </form>
        ) : (
          <p>No machine selected.</p>
        )}
      </Panel>
    );
  }

  return (
    <div className={`app-shell ${isWorkshopMode && activeModule === "atelier" ? "app-shell--workshop" : ""}`}>
      <main className="workspace">
        <header className="hero">
          <div>
            <p className="eyebrow">Plast Track MVP</p>
            <h1>Workshop supervision</h1>
          </div>
          <div className="hero__status">
            <span className="hero__dot" aria-hidden="true" />
            <strong>{connectionStatus}</strong>
            {errorMessage ? <p>{errorMessage}</p> : null}
          </div>
        </header>

        {connectionStatus === "Reconnecting" ? <div className="connection-banner">Reconnecting...</div> : null}

        <section className="summary-ribbon" aria-label="Workshop summary">
          <KpiBlock label="Global OEE" value={`${summaryMetrics.oee}%`} subLabel="Daily aggregate" tone="dark" />
          <KpiBlock label="Production" value={summaryMetrics.production} subLabel={`${machines.length} machines monitored`} />
          <KpiBlock label="Open stops" value={summaryMetrics.openDowntimes} subLabel="Awaiting qualification" />
          <KpiBlock label="Output / scrap" value={`${summaryMetrics.producedQty} / ${summaryMetrics.scrapQty}`} subLabel="Pieces today" />
        </section>

        <nav className="module-tabs" aria-label="Modules">
          {moduleTabs.map((tab) => (
            <button
              key={tab.key}
              type="button"
              className={`module-tabs__button ${activeModule === tab.key ? "is-active" : ""}`}
              onClick={() => {
                setActiveModule(tab.key);
                if (tab.key !== "atelier") {
                  setIsWorkshopMode(false);
                }
              }}
            >
              <span>{tab.label}</span>
              <small>{tab.description}</small>
            </button>
          ))}
        </nav>

        <section className="module-view">{renderModule()}</section>
      </main>
    </div>
  );
}