/* Government — agency-side triage inbox.
 * Click a request to view its bilingual FR/AR drafted letter.
 */

const govTheme = {
  bg:    "#111110",
  card:  "#171715",
  cardHi:"#1f1c19",
  line:  "#242420",
  ink:   "#f0ece4",
  ink2:  "#a8a49b",
  ink3:  "#6b6862",
  ink4:  "#4a4842",
  amber: "#d99350",
  green: "#6aa37d",
  red:   "#d35a4a",
  blue:  "#6c8db6",
  teal:  "#5fa19a",
  purple:"#8e84c8",
};

const GOV_TYPES = {
  TR: { label: "Transfer",   color: govTheme.blue   },
  CU: { label: "Cadastre",   color: govTheme.green  },
  BD: { label: "Dispute",    color: govTheme.amber  },
  MO: { label: "Mortgage",   color: govTheme.purple },
  SU: { label: "Subdivision",color: govTheme.teal   },
};

const GOV_REQUESTS = [
  {
    id: "LR-04127", type: "TR", subject: "Property transfer · title 41/284", who: "Tlemçani Holdings",
    status: "ready",
    fr: { greeting: "Madame, Monsieur,", body: "L'Agence accuse réception de votre demande de transfert de propriété (titre 41/284) et confirme que toutes les pièces sont conformes. Votre dossier a été transmis au Bureau des transferts. Délai de traitement prévisionnel : 14 jours.", subject: "Accusé de réception · transfert de propriété" },
    ar: { body: "تُؤكد الوكالة استلام طلبكم الخاص بنقل الملكية (الرسم العقاري رقم 41/284) وتفيدكم بأن الوثائق كاملة." },
    out: "Transmis à Bureau des transferts",
  },
  {
    id: "LR-04126", type: "BD", subject: "Boundary dispute · parcel 17b/Aïn", who: "Bennani / Saidi",
    status: "missing", miss: "ID copy · tax clearance",
    fr: { greeting: "Madame, Monsieur,", body: "Suite à l'examen de votre dossier, les pièces suivantes manquent et doivent être transmises dans un délai de quinze (15) jours : copie de la pièce d'identité, quitus fiscal récent.", subject: "Pièces manquantes · litige de bornage" },
    ar: { body: "نحيطكم علماً بأن الوثائق التالية ناقصة. يرجى تقديمها خلال خمسة عشر يوماً." },
    out: "En attente · pièces manquantes",
  },
  {
    id: "LR-04125", type: "CU", subject: "Cadastral update · divider", who: "Commune de Salé",
    status: "ready",
    fr: { greeting: "Monsieur le Maire,", body: "La mise à jour cadastrale demandée (division parcellaire) a été enregistrée. Le service technique procédera au levé topographique sous 21 jours.", subject: "Accusé de réception · mise à jour cadastrale" },
    ar: { body: "تم تسجيل طلب التحديث المساحي. سيقوم القسم التقني بالعمل خلال 21 يوماً." },
    out: "Transmis à Cadastre technique",
  },
  {
    id: "LR-04124", type: "TR", subject: "Inheritance transfer · 3 heirs", who: "Succession Lamrini",
    status: "ready",
    fr: { greeting: "Madame, Monsieur,", body: "Votre demande de transfert successoral concernant 3 ayants droit est complète. Acte notarié vérifié. Le dossier est transmis au Bureau des transferts pour inscription.", subject: "Accusé de réception · transfert successoral" },
    ar: { body: "ملف نقل التركة مكتمل. تم إحالته إلى مكتب نقل الملكية." },
    out: "Transmis · 14 jours",
  },
  {
    id: "LR-04123", type: "MO", subject: "Mortgage registration", who: "Bank of Africa",
    status: "ready",
    fr: { greeting: "Madame, Monsieur,", body: "Votre demande d'inscription d'hypothèque a été enregistrée. Acte authentique conforme. Le service des hypothèques procédera à l'inscription sous 7 jours ouvrés.", subject: "Accusé de réception · hypothèque" },
    ar: { body: "تم تسجيل طلب إقامة الرهن. سيقوم قسم الرهون بالإجراء خلال 7 أيام عمل." },
    out: "Transmis à Hypothèques",
  },
  {
    id: "LR-04122", type: "BD", subject: "Disputed boundary · parcel 28/STK", who: "Coop. STK",
    status: "missing", miss: "Notary page · survey",
    fr: { greeting: "Madame, Monsieur,", body: "Les pièces suivantes sont manquantes : page notariée signée et levé topographique récent. Délai 15 jours.", subject: "Pièces manquantes · bornage contesté" },
    ar: { body: "الوثائق التالية ناقصة. يرجى تقديمها خلال خمسة عشر يوماً." },
    out: "En attente · pièces manquantes",
  },
  {
    id: "LR-04121", type: "SU", subject: "Subdivision · 4 lots", who: "Promoteurs Reünis",
    status: "ready",
    fr: { greeting: "Madame, Monsieur,", body: "Votre demande de subdivision en 4 lots est complète. Le service technique procédera au bornage et à l'attribution des nouveaux titres sous 30 jours.", subject: "Accusé de réception · subdivision" },
    ar: { body: "ملف التقسيم إلى 4 قطع مكتمل." },
    out: "Transmis à Lotissements",
  },
];

function GovTypePill({ type }) {
  const t = GOV_TYPES[type];
  return (
    <span style={{
      fontSize: 10.5,
      padding: "2px 8px",
      background: t.color + "1f",
      color: t.color,
      borderRadius: 3,
      fontWeight: 600,
      letterSpacing: "0.04em",
    }}>{t.label}</span>
  );
}

function GovernmentPreview() {
  const [pick, setPick] = React.useState("LR-04126");
  const sel = GOV_REQUESTS.find(r => r.id === pick) || GOV_REQUESTS[1];

  return (
    <div style={{
      background: govTheme.bg,
      color: govTheme.ink,
      borderRadius: 14,
      padding: "24px 28px 28px",
      boxShadow: "0 30px 60px -25px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04)",
      maxWidth: 820,
      fontFamily: '"Inter", sans-serif',
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
        <div>
          <div style={{ fontSize: 11, letterSpacing: "0.16em", color: govTheme.ink3, textTransform: "uppercase" }}>Citizen requests · today</div>
          <div style={{ fontSize: 20, fontWeight: 600, marginTop: 4, letterSpacing: "-0.01em" }}>Land registry · triage</div>
        </div>
        <div style={{ textAlign: "right" }}>
          <div style={{ fontSize: 11, letterSpacing: "0.16em", color: govTheme.ink3, textTransform: "uppercase" }}>Handled</div>
          <div style={{ fontSize: 26, fontWeight: 600, color: govTheme.amber, lineHeight: 1, letterSpacing: "-0.02em" }}>287</div>
          <div style={{ fontSize: 11, color: govTheme.ink3, marginTop: 4 }}>40 need follow-up · 247 routed</div>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 18, marginTop: 20 }}>
        <div>
          <div style={{ fontSize: 11, letterSpacing: "0.14em", color: govTheme.ink3, textTransform: "uppercase", marginBottom: 8, display: "flex", justifyContent: "space-between" }}>
            <span>Inbox · most recent</span>
            <span style={{ color: govTheme.ink4 }}>click to view reply</span>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
            {GOV_REQUESTS.map(r => {
              const active = r.id === pick;
              return (
                <button key={r.id} onClick={() => setPick(r.id)} style={{
                  textAlign: "left",
                  padding: "10px 12px",
                  background: active ? govTheme.cardHi : govTheme.card,
                  borderRadius: 8,
                  display: "flex", alignItems: "flex-start", gap: 10,
                  cursor: "pointer",
                  boxShadow: active ? "inset 3px 0 0 " + govTheme.amber : "inset 3px 0 0 transparent",
                  transition: "background 0.15s ease",
                }}>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                      <span className="mono" style={{ fontSize: 11, color: active ? govTheme.amber : govTheme.ink3 }}>{r.id}</span>
                      <GovTypePill type={r.type} />
                    </div>
                    <div style={{ fontSize: 12.5, color: govTheme.ink, marginTop: 4, lineHeight: 1.35 }}>{r.subject}</div>
                    <div style={{ fontSize: 11, color: govTheme.ink3, marginTop: 2 }}>{r.who}</div>
                    {r.status === "missing" && (
                      <div style={{ fontSize: 11, color: govTheme.red, marginTop: 4 }}>missing: {r.miss}</div>
                    )}
                  </div>
                  <div style={{ textAlign: "right" }}>
                    <span style={{
                      fontSize: 10.5,
                      padding: "2px 8px",
                      background: r.status === "missing" ? "rgba(211,90,74,0.15)" : "rgba(106,163,125,0.15)",
                      color: r.status === "missing" ? govTheme.red : govTheme.green,
                      borderRadius: 3, fontWeight: 600,
                      letterSpacing: "0.04em", textTransform: "uppercase",
                    }}>{r.status}</span>
                  </div>
                </button>
              );
            })}
          </div>
        </div>

        <div>
          <div style={{ fontSize: 11, letterSpacing: "0.14em", color: govTheme.ink3, textTransform: "uppercase", marginBottom: 8 }}>
            Drafted reply · <span style={{ color: govTheme.amber }}>{sel.id}</span>
          </div>
          <div style={{
            background: "#f3efe6",
            color: "#1c1b18",
            borderRadius: 8,
            padding: "18px 20px 22px",
            fontSize: 11.5,
            lineHeight: 1.5,
          }}>
            <div style={{ fontSize: 11.5, fontWeight: 700 }}>Agence du Cadastre</div>
            <div style={{ fontSize: 10.5, color: "#6b6862", marginTop: 1 }}>Réf. {sel.id} · 18 mai 2026</div>
            <div style={{ marginTop: 10 }}>
              <b>Objet :</b> {sel.fr.subject}
            </div>
            <div style={{ marginTop: 8 }}>{sel.fr.greeting}</div>
            <p style={{ margin: "6px 0 0" }}>{sel.fr.body}</p>

            <div style={{
              marginTop: 12, paddingTop: 10,
              borderTop: "1px dashed #cfc8b6",
              direction: "rtl", textAlign: "right", fontSize: 11,
            }}>
              <div>السيد/السيدة،</div>
              <div style={{ marginTop: 2 }}>{sel.ar.body}</div>
            </div>

            <div style={{ marginTop: 12, fontSize: 10.5, color: "#9c988e", display: "flex", justifyContent: "space-between" }}>
              <span>{sel.status === "missing" ? "Awaiting docs" : "Auto-drafted · pending review"}</span>
              <span>↳ {sel.out}</span>
            </div>
          </div>
          <div style={{ marginTop: 10, display: "flex", gap: 6 }}>
            <button style={{
              fontSize: 11, color: "#0a0a0a", fontWeight: 600,
              background: govTheme.amber,
              padding: "6px 12px", borderRadius: 5,
            }}>Send</button>
            <button style={{
              fontSize: 11, color: govTheme.ink2,
              background: "rgba(255,255,255,0.04)",
              padding: "6px 12px", borderRadius: 5,
            }}>Edit draft</button>
          </div>
        </div>
      </div>

      <div style={{
        marginTop: 18, paddingTop: 14,
        borderTop: "1px solid " + govTheme.line,
        display: "flex", justifyContent: "space-between", fontSize: 11, color: govTheme.ink3,
      }}>
        <span>Sorted by type, priority and region · drafted bilingually</span>
        <span>247 ready to route · 40 awaiting documents</span>
      </div>
    </div>
  );
}

window.GovernmentPreview = GovernmentPreview;