import { useState } from "react";

const CURRENCIES = ["CHF – Schweizer Franken", "EUR – Euro"];

function Field({ label, required, hint, error, readonly, children }) {
  return (
    <div style={{ marginBottom: 16 }}>
      <label style={{ display: "block", fontSize: 12, fontWeight: 500, color: readonly ? "#888780" : "#1a1a18", marginBottom: 5 }}>
        {label}
        {required && <span style={{ color: "#A32D2D", marginLeft: 2 }}>*</span>}
        {readonly && <span style={{ fontSize: 10, color: "#B4B2A9", marginLeft: 6, fontWeight: 400 }}>(nicht änderbar)</span>}
      </label>
      {children}
      {hint && !error && <div style={{ fontSize: 10, color: "#888780", marginTop: 4 }}>{hint}</div>}
      {error && <div style={{ fontSize: 10, color: "#A32D2D", marginTop: 4 }}>⚠ {error}</div>}
    </div>
  );
}

const inputStyle = (hasError, readonly) => ({
  width: "100%", boxSizing: "border-box",
  padding: "8px 12px", fontSize: 12,
  border: `1px solid ${hasError ? "#A32D2D" : readonly ? "#E8E6DF" : "#B4B2A9"}`,
  borderRadius: 6,
  background: readonly ? "#F1EFE8" : "#fff",
  color: readonly ? "#888780" : "#1a1a18",
  outline: "none",
});

export default function TA01() {
  const [form, setForm] = useState({
    name:          "Tauchschule Zürich GmbH",
    street:        "Seestrasse 12",
    zip:           "8001",
    city:          "Zürich",
    phoneLandline: "+41 44 123 45 67",
    phoneMobile:   "",
    contactPerson: "Hans Muster",
    contactEmail:  "info@tauchzh.ch",
    currency:      "CHF – Schweizer Franken", // readonly nach G9
    vatNumber:     "CHE-123.456.789 MWST",
  });
  const [errors, setErrors]     = useState({});
  const [saved, setSaved]       = useState(false);
  const [dirty, setDirty]       = useState(false);

  const set = (key) => (e) => {
    setForm(f => ({ ...f, [key]: e.target.value }));
    setErrors(er => ({ ...er, [key]: undefined }));
    setDirty(true);
    setSaved(false);
  };

  const validate = () => {
    const e = {};
    if (!form.name.trim())          e.name          = "Schulname ist ein Pflichtfeld";
    if (!form.street.trim())        e.street        = "Strasse ist ein Pflichtfeld";
    if (!form.zip.trim())           e.zip           = "PLZ ist ein Pflichtfeld";
    if (!form.city.trim())          e.city          = "Stadt ist ein Pflichtfeld";
    if (!form.phoneLandline.trim() && !form.phoneMobile.trim())
                                    e.phone         = "Mindestens eine Telefonnummer ist Pflicht";
    if (!form.contactPerson.trim()) e.contactPerson = "Kontaktperson ist ein Pflichtfeld";
    if (!form.contactEmail.trim())  e.contactEmail  = "Kontakt-E-Mail ist ein Pflichtfeld";
    return e;
  };

  const handleSave = () => {
    const e = validate();
    setErrors(e);
    if (Object.keys(e).length === 0) { setSaved(true); setDirty(false); }
  };

  return (
    <div style={{ fontFamily: "var(--font-sans, system-ui)", background: "#F1EFE8", minHeight: 700, borderRadius: 8, overflow: "hidden" }}>

      {/* NAV */}
      <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", fontSize: 11 }}>Tauchschule Zürich GmbH</span>
        <div style={{ marginLeft: "auto", display: "flex", gap: 20, fontSize: 12 }}>
          <span style={{ color: "#888780" }}>Dashboard</span>
          <span style={{ color: "#888780" }}>Kunden</span>
          <span style={{ color: "#888780" }}>Geräte</span>
          <span style={{ color: "#888780" }}>Inspektionen</span>
          <span style={{ color: "#fff", fontWeight: 500, borderBottom: "1px solid #185FA5", paddingBottom: 2 }}>Einstellungen</span>
          <span style={{ color: "#D3D1C7", fontWeight: 500 }}>Hans Muster</span>
        </div>
      </div>

      <div style={{ padding: "16px 24px" }}>

        {/* BREADCRUMB */}
        <div style={{ fontSize: 12, color: "#888780", marginBottom: 12 }}>
          <span style={{ color: "#185FA5", cursor: "pointer" }}>Einstellungen</span>
          <span style={{ margin: "0 6px" }}>›</span>
          <span>Schulprofil</span>
        </div>

        {/* TITEL + AKTIONEN */}
        <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", marginBottom: 16 }}>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 4 }}>
              <h1 style={{ fontSize: 20, fontWeight: 500, color: "#1a1a18", margin: 0 }}>Schulprofil bearbeiten</h1>
              <span style={{ background: "#E6F1FB", color: "#185FA5", fontSize: 11, fontWeight: 500, padding: "2px 8px", borderRadius: 20 }}>TA-01</span>
            </div>
            <p style={{ fontSize: 12, color: "#5F5E5A", margin: 0 }}>Aktualisieren Sie die Angaben zu Ihrer Tauchschule.</p>
          </div>
          {/* Speichern-Status */}
          {saved && (
            <div style={{ display: "flex", alignItems: "center", gap: 6, background: "#EAF3DE", border: "1px solid #A8D08D", borderRadius: 6, padding: "6px 12px", fontSize: 12, color: "#3B6D11" }}>
              ✓ Gespeichert
            </div>
          )}
        </div>

        {/* UNGESPEICHERTE ÄNDERUNGEN */}
        {dirty && (
          <div style={{ background: "#FAEEDA", border: "1px solid #FAC775", borderRadius: 6, padding: "8px 14px", fontSize: 11, color: "#BA7517", marginBottom: 16 }}>
            ⚠ Sie haben ungespeicherte Änderungen.
          </div>
        )}

        {/* FORMULAR CARD */}
        <div style={{ background: "#fff", border: "1px solid #D3D1C7", borderRadius: 10, padding: "20px 24px", marginBottom: 16 }}>

          {/* ── SCHULANGABEN ── */}
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }}>
            <div style={{ flex: 1, height: 1, background: "#D3D1C7" }} />
            <span style={{ fontSize: 11, color: "#888780", whiteSpace: "nowrap" }}>Schulangaben</span>
            <div style={{ flex: 1, height: 1, background: "#D3D1C7" }} />
          </div>

          <Field label="Schulname" required error={errors.name}>
            <input value={form.name} onChange={set("name")} style={inputStyle(errors.name, false)} />
          </Field>

          <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 12 }}>
            <Field label="Strasse / Nr." required error={errors.street}>
              <input value={form.street} onChange={set("street")} style={inputStyle(errors.street, false)} />
            </Field>
            <Field label="PLZ" required error={errors.zip}>
              <input value={form.zip} onChange={set("zip")} style={inputStyle(errors.zip, false)} />
            </Field>
          </div>

          <Field label="Stadt" required error={errors.city}>
            <input value={form.city} onChange={set("city")} style={inputStyle(errors.city, false)} />
          </Field>

          {/* ── KONTAKT ── */}
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16, marginTop: 8 }}>
            <div style={{ flex: 1, height: 1, background: "#D3D1C7" }} />
            <span style={{ fontSize: 11, color: "#888780", whiteSpace: "nowrap" }}>Kontakt</span>
            <div style={{ flex: 1, height: 1, background: "#D3D1C7" }} />
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            <Field label="Telefon Festnetz" error={errors.phone} hint="Mind. Festnetz oder Mobil Pflicht">
              <input value={form.phoneLandline} onChange={set("phoneLandline")} placeholder="+41 44 123 45 67" style={inputStyle(errors.phone && !form.phoneLandline, false)} />
            </Field>
            <Field label="Telefon Mobil" hint="Mind. Festnetz oder Mobil Pflicht">
              <input value={form.phoneMobile} onChange={set("phoneMobile")} placeholder="+41 79 123 45 67" style={inputStyle(errors.phone && !form.phoneMobile, false)} />
            </Field>
          </div>

          <Field label="Kontaktperson" required error={errors.contactPerson}
            hint="Name der verantwortlichen Person">
            <input value={form.contactPerson} onChange={set("contactPerson")} style={inputStyle(errors.contactPerson, false)} />
          </Field>

          <Field label="Kontakt-E-Mail" required error={errors.contactEmail}
            hint="Öffentliche Kontakt-E-Mail der Schule">
            <input value={form.contactEmail} onChange={set("contactEmail")} type="email" style={inputStyle(errors.contactEmail, false)} />
          </Field>

          {/* ── FINANZEN ── */}
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16, marginTop: 8 }}>
            <div style={{ flex: 1, height: 1, background: "#D3D1C7" }} />
            <span style={{ fontSize: 11, color: "#888780", whiteSpace: "nowrap" }}>Finanzen</span>
            <div style={{ flex: 1, height: 1, background: "#D3D1C7" }} />
          </div>

          {/* Währung: readonly (G9) */}
          <Field label="Standard-Währung" readonly
            hint="Änderung nur durch Superadmin möglich (G9)">
            <input value={form.currency} readOnly style={inputStyle(false, true)} />
          </Field>

          <Field label="MwSt-Nummer" hint="Optional – je nach Land und Unternehmensform">
            <input value={form.vatNumber} onChange={set("vatNumber")} placeholder="CHE-123.456.789 MWST" style={inputStyle(false, false)} />
          </Field>

          {/* Logo V2 */}
          <div style={{ background: "#F1EFE8", border: "1px dashed #B4B2A9", borderRadius: 6, padding: "12px 16px", textAlign: "center" }}>
            <div style={{ fontSize: 11, color: "#888780" }}>Logo hochladen</div>
            <div style={{ fontSize: 10, color: "#B4B2A9", marginTop: 4 }}>Verfügbar in V2</div>
          </div>

        </div>

        {/* BUTTONS */}
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <span style={{ fontSize: 11, color: "#888780" }}><span style={{ color: "#A32D2D" }}>*</span> Pflichtfeld  ·  G9: Währung nur via Superadmin änderbar</span>
          <div style={{ display: "flex", gap: 10 }}>
            <button onClick={() => { setForm(f => ({ ...f })); setDirty(false); setSaved(false); }}
              style={{ padding: "8px 20px", fontSize: 12, background: "#fff", border: "1px solid #B4B2A9", borderRadius: 6, color: "#5F5E5A", cursor: "pointer" }}>
              Abbrechen
            </button>
            <button onClick={handleSave}
              style={{ padding: "8px 20px", fontSize: 12, fontWeight: 500, background: "#185FA5", border: "none", borderRadius: 6, color: "#fff", cursor: "pointer" }}>
              Änderungen speichern
            </button>
          </div>
        </div>

        {/* SIMULATIONSHINWEIS */}
        <div style={{ marginTop: 14, padding: "10px 14px", background: "#FAEEDA", border: "1px solid #FAC775", borderRadius: 8, fontSize: 11, color: "#BA7517" }}>
          <strong>Wireframe-Simulation:</strong> Felder editierbar. Währung readonly (G9). Änderung → oranger Hinweis. Speichern → grüne Bestätigung. Pflichtfeld-Validierung aktiv.
        </div>

        {/* METAINFO */}
        <div style={{ marginTop: 12, padding: "8px 12px", background: "#fff", border: "1px solid #D3D1C7", borderRadius: 6, fontSize: 10, color: "#888780" }}>
          Screen: TA-01  |  UC00 – Tenant-Onboarding  |  Akteur: tenant_admin  |  Folge-Screen: Dashboard  |  v0.1 – April 2026
        </div>

      </div>
    </div>
  );
}