import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { RULES, RULE_CATEGORIES } from "../lib/rules";

export const loader = async () => {
  const rulesByCategory = RULE_CATEGORIES.map((cat) => ({
    label: cat.label,
    description: cat.description,
    rules: RULES.filter((r) => r.category === cat.key).map((r) => ({
      key: r.key,
      label: r.label,
      robotsValue: r.robotsValue,
      hasCanonical: r.hasCanonical,
      hasCustomValue: r.hasCustomValue,
      defaultEnabled: r.defaultEnabled,
    })),
  }));

  return json({ rulesByCategory });
};

export default function AdminConfig() {
  const { rulesByCategory } = useLoaderData<typeof loader>();

  return (
    <div>
      <h1 style={{ margin: "0 0 0.5rem", fontSize: "1.5rem" }}>Configuration</h1>
      <p style={{ margin: "0 0 1.5rem", color: "#6b7280", fontSize: "0.875rem" }}>
        Règles par défaut appliquées à chaque nouvelle installation. Modification à venir.
      </p>

      {rulesByCategory.map((cat) => (
        <div key={cat.label} style={{ marginBottom: "1.5rem" }}>
          <h2 style={{ fontSize: "1.125rem", margin: "0 0 0.5rem" }}>{cat.label}</h2>
          <p style={{ margin: "0 0 0.75rem", color: "#6b7280", fontSize: "0.8125rem" }}>{cat.description}</p>

          <div style={{ background: "white", borderRadius: "8px", boxShadow: "0 1px 3px rgba(0,0,0,0.1)", overflow: "hidden" }}>
            <table style={{ width: "100%", borderCollapse: "collapse", fontSize: "0.875rem" }}>
              <thead>
                <tr style={{ background: "#f9fafb" }}>
                  <th style={{ padding: "0.75rem 1rem", textAlign: "left" }}>Regle</th>
                  <th style={{ padding: "0.75rem 1rem", textAlign: "center" }}>Par defaut</th>
                  <th style={{ padding: "0.75rem 1rem", textAlign: "center" }}>Robots</th>
                  <th style={{ padding: "0.75rem 1rem", textAlign: "center" }}>Canonical</th>
                  <th style={{ padding: "0.75rem 1rem", textAlign: "center" }}>Custom</th>
                </tr>
              </thead>
              <tbody>
                {cat.rules.map((rule) => (
                  <tr key={rule.key} style={{ borderTop: "1px solid #e5e7eb" }}>
                    <td style={{ padding: "0.75rem 1rem" }}>{rule.label}</td>
                    <td style={{ padding: "0.75rem 1rem", textAlign: "center" }}>
                      <span style={{
                        display: "inline-block",
                        padding: "0.125rem 0.5rem",
                        borderRadius: "4px",
                        fontSize: "0.75rem",
                        fontWeight: 500,
                        background: rule.defaultEnabled ? "#dcfce7" : "#f3f4f6",
                        color: rule.defaultEnabled ? "#166534" : "#6b7280",
                      }}>
                        {rule.defaultEnabled ? "ON" : "OFF"}
                      </span>
                    </td>
                    <td style={{ padding: "0.75rem 1rem", textAlign: "center", fontFamily: "monospace", fontSize: "0.75rem" }}>
                      {rule.robotsValue}
                    </td>
                    <td style={{ padding: "0.75rem 1rem", textAlign: "center" }}>
                      {rule.hasCanonical ? "oui" : "—"}
                    </td>
                    <td style={{ padding: "0.75rem 1rem", textAlign: "center" }}>
                      {rule.hasCustomValue ? "oui" : "—"}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      ))}
    </div>
  );
}