"use client";

import { Fragment, type ComponentType } from "react";
import { useLang } from "@/context/LanguageContext";
import { PageHeader } from "@/components/ui";
import {
  IconShield,
  IconHome,
  IconBook,
  IconLayers,
  IconAcademic,
  IconTruck,
  IconTrend,
  IconBox,
  IconBell,
  IconUserCheck,
  IconClipboard,
  IconUsers,
  IconUser,
  IconLock,
  IconGlobe,
  IconPhone,
  IconPrinter,
  IconAward,
  IconCalendar,
  IconCard,
  IconFile,
  IconArrowRight,
} from "@/components/icons";

type IconType = ComponentType<{ className?: string }>;

/** Vertical connector between tiers — label chip, stem and arrowhead. */
function FlowLink({ label }: { label: string }) {
  return (
    <div className="ems-flow-link">
      <span className="ems-flow-link-chip">{label}</span>
      <span className="ems-flow-link-line" />
      <span className="ems-flow-link-arrow" />
    </div>
  );
}

function Tier({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div className="ems-flow-tier">
      <div className="ems-flow-tierlabel">{label}</div>
      <div className="ems-flow-row">{children}</div>
    </div>
  );
}

function FlowNode({
  icon: Icon,
  title,
  desc,
  soft,
}: {
  icon: IconType;
  title: string;
  desc?: string;
  soft?: boolean;
}) {
  return (
    <div className={`ems-flow-node ${soft ? "ems-flow-node-soft" : ""}`}>
      <span className="ems-flow-node-ic">
        <Icon className="svg-16" />
      </span>
      <span className="ems-flow-node-tt">{title}</span>
      {desc && <span className="ems-flow-node-ds">{desc}</span>}
    </div>
  );
}

/** Central panel → Platform Flowchart: how the whole IncrelogEMS ecosystem
    flows from the central authority down to every stakeholder, plus the
    core advantages that set it apart from other education-management
    service providers. */
export default function CentralFlowchartPage() {
  const { t } = useLang();
  const f = t.flowchartPage;

  const institutions: { icon: IconType; label: string }[] = [
    { icon: IconHome, label: f.instPrimary },
    { icon: IconBook, label: f.instHigh },
    { icon: IconLayers, label: f.instCollege },
    { icon: IconAcademic, label: f.instUniversity },
  ];
  const steps = [f.step1, f.step2, f.step3, f.step4, f.step5, f.step6, f.step7];
  const ops: { icon: IconType; label: string; desc: string }[] = [
    { icon: IconTruck, label: f.opTransport, desc: f.opTransportDesc },
    { icon: IconBook, label: f.opLibrary, desc: f.opLibraryDesc },
    { icon: IconHome, label: f.opHostel, desc: f.opHostelDesc },
    { icon: IconTrend, label: f.opAccounts, desc: f.opAccountsDesc },
    { icon: IconBox, label: f.opInventory, desc: f.opInventoryDesc },
    { icon: IconBell, label: f.opNotices, desc: f.opNoticesDesc },
  ];
  const stakeholders: { icon: IconType; label: string }[] = [
    { icon: IconUserCheck, label: f.shAdmins },
    { icon: IconClipboard, label: f.shTeachers },
    { icon: IconUsers, label: f.shStudents },
    { icon: IconUser, label: f.shMembers },
  ];
  const band: { icon: IconType; label: string }[] = [
    { icon: IconLock, label: f.bandSecurity },
    { icon: IconGlobe, label: f.bandBilingual },
    { icon: IconPhone, label: f.bandMobile },
    { icon: IconPrinter, label: f.bandReports },
  ];
  const edges: { icon: IconType; title: string; desc: string }[] = [
    { icon: IconLayers, title: f.f1Title, desc: f.f1Desc },
    { icon: IconAward, title: f.f2Title, desc: f.f2Desc },
    { icon: IconCalendar, title: f.f3Title, desc: f.f3Desc },
    { icon: IconCard, title: f.f4Title, desc: f.f4Desc },
    { icon: IconFile, title: f.f5Title, desc: f.f5Desc },
    { icon: IconGlobe, title: f.f6Title, desc: f.f6Desc },
    { icon: IconShield, title: f.f7Title, desc: f.f7Desc },
    { icon: IconTrend, title: f.f8Title, desc: f.f8Desc },
  ];

  return (
    <div>
      <PageHeader title={f.title} subtitle={f.subtitle} />

      {/* ---------- Flow chart ---------- */}
      <div className="card ems-flow-card">
        <div className="card-body">
          {/* Tier 1 — central authority */}
          <div className="ems-flow-tier">
            <div className="ems-flow-root">
              <span className="ems-flow-root-ic">
                <IconShield className="svg-16" />
              </span>
              <div className="text-start">
                <div className="ems-flow-root-tt">{f.tier1Title}</div>
                <div className="ems-flow-root-ds">{f.tier1Desc}</div>
              </div>
            </div>
          </div>

          <FlowLink label={f.link1} />

          {/* Tier 2 — institution network */}
          <Tier label={f.tier2Title}>
            {institutions.map((n) => (
              <FlowNode key={n.label} icon={n.icon} title={n.label} />
            ))}
          </Tier>
          <div className="ems-flow-chipnote">{f.branchChip}</div>

          <FlowLink label={f.link2} />

          {/* Tier 3 — academic core pipeline */}
          <div className="ems-flow-tier">
            <div className="ems-flow-tierlabel">{f.tier3Title}</div>
            <div className="ems-flow-pipe">
              {steps.map((s, i) => (
                <Fragment key={s}>
                  {i > 0 && <IconArrowRight className="ems-flow-parrow svg-16" />}
                  <span className="ems-flow-step">
                    <b>{i + 1}</b>
                    {s}
                  </span>
                </Fragment>
              ))}
            </div>
          </div>

          <FlowLink label={f.link3} />

          {/* Tier 4 — operations & finance */}
          <Tier label={f.tier4Title}>
            {ops.map((n) => (
              <FlowNode key={n.label} icon={n.icon} title={n.label} desc={n.desc} />
            ))}
          </Tier>

          <FlowLink label={f.link4} />

          {/* Tier 5 — stakeholders */}
          <Tier label={f.tier5Title}>
            {stakeholders.map((n) => (
              <FlowNode key={n.label} icon={n.icon} title={n.label} soft />
            ))}
          </Tier>

          {/* cross-cutting capabilities */}
          <div className="ems-flow-band">
            <span className="ems-flow-band-tt">{f.bandTitle}</span>
            {band.map((b) => (
              <span key={b.label} className="ems-flow-band-item">
                <b.icon className="svg-16" />
                {b.label}
              </span>
            ))}
          </div>
        </div>
      </div>

      {/* ---------- Competitive edge grid ---------- */}
      <div className="d-flex align-items-center justify-content-between flex-wrap gap-2 mt-4 mb-2">
        <h5 className="mb-0 f-w-700">{f.edgeTitle}</h5>
        <span className="text-muted ems-fs-12">{f.edgeSubtitle}</span>
      </div>
      <div className="row g-3">
        {edges.map((e) => (
          <div className="col-12 col-sm-6 col-xl-3" key={e.title}>
            <div className="card ems-edge-card h-100">
              <div className="card-body">
                <span className="ems-edge-ic">
                  <e.icon className="svg-16" />
                </span>
                <h6 className="mt-3 mb-1 f-w-700 ems-fs-14">{e.title}</h6>
                <p className="mb-0 ems-fs-12 text-muted">{e.desc}</p>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}