import { ArrowRight, Building2, FileText, Globe2, Scale, ShieldAlert } from 'lucide-react';
import Link from 'next/link';

import {
  institutionalUx,
  jurisdictionStatusClass,
  type InstitutionalPortal,
  type JurisdictionCard,
  type LegalTrack,
  type OnboardingStep,
} from '@/lib/institutional-ux-data';

export function InstitutionalComplianceHub() {
  const { disclaimer, legalTracks, onboardingJourney, jurisdictionCards, portals, prohibitedClaimsPreview } =
    institutionalUx;

  const counselPortals = portals.filter((p) => p.audience === 'counsel');
  const institutionalPortals = portals.filter((p) => p.audience !== 'counsel');

  return (
    <section
      id="institutional-compliance"
      className="relative scroll-mt-20 border-y border-sovereign-bronze/20 bg-sovereign-midnight/40 py-20"
    >
      <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="max-w-3xl">
          <div className="mb-3 inline-flex items-center gap-2 rounded-full border border-sovereign-bronze/40 bg-sovereign-bronze/10 px-3 py-1 text-xs font-semibold uppercase tracking-wider text-sovereign-gold">
            <Scale className="h-3.5 w-3.5" aria-hidden />
            Institutional compliance
          </div>
          <h2 className="text-3xl font-bold tracking-tight text-sovereign-ivory sm:text-4xl">
            Onboarding, legal tracks &amp; jurisdiction matrices
          </h2>
          <p className="mt-4 text-lg leading-relaxed text-sovereign-ivory/70">
            Sovereign and regulated institutions follow a defined path: charter acknowledgment, compliance
            intake, per-jurisdiction matrices, and production gates — with separate legal tracks for Order
            capacity and operational transactability.
          </p>
          <p className="mt-3 text-xs leading-relaxed text-sovereign-ivory/45">{disclaimer}</p>
        </div>

        {/* Two legal tracks */}
        <div className="mt-12 grid gap-4 lg:grid-cols-2">
          {legalTracks.map((track) => (
            <LegalTrackCard key={track.id} track={track} />
          ))}
        </div>

        {/* Onboarding journey */}
        <div className="mt-14">
          <h3 className="text-lg font-semibold text-sovereign-ivory">Institution onboarding journey</h3>
          <ol className="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
            {onboardingJourney.map((step) => (
              <JourneyStepCard key={step.step} step={step} />
            ))}
          </ol>
        </div>

        {/* Jurisdiction cards */}
        <div className="mt-14">
          <h3 className="text-lg font-semibold text-sovereign-ivory">Active jurisdiction matrices</h3>
          <div className="mt-6 grid gap-4 md:grid-cols-3">
            {jurisdictionCards.map((j) => (
              <JurisdictionCardView key={j.id} card={j} />
            ))}
          </div>
        </div>

        {/* Prohibited claims */}
        {prohibitedClaimsPreview.length > 0 ? (
          <div className="mt-12 rounded-xl border border-amber-500/25 bg-amber-500/5 p-5">
            <div className="flex items-start gap-3">
              <ShieldAlert className="mt-0.5 h-5 w-5 shrink-0 text-amber-400" aria-hidden />
              <div>
                <p className="text-sm font-semibold text-amber-200">Prohibited external claims</p>
                <ul className="mt-2 space-y-1 text-sm text-sovereign-ivory/65">
                  {prohibitedClaimsPreview.map((c) => (
                    <li key={c}>· {c}</li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        ) : null}

        {/* Counsel return — external counsel */}
        {counselPortals.length > 0 ? (
          <div className="mt-12 rounded-xl border border-indigo-500/25 bg-indigo-500/5 p-6">
            <div className="flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
              <div className="max-w-xl">
                <div className="inline-flex items-center gap-2 text-sm font-semibold text-indigo-200">
                  <FileText className="h-4 w-4" aria-hidden />
                  External counsel returns
                </div>
                <p className="mt-2 text-xs leading-relaxed text-sovereign-ivory/55">
                  Track A checklist and Track B WP-1–4 deliverables — signed matrices, memoranda PDFs, and gap
                  register. Preferred channel: Gitea issue with the counsel-return template.
                </p>
              </div>
              <div className="flex flex-wrap gap-3">
                {counselPortals.map((p) => (
                  <CounselPortalButton key={p.id} portal={p} primary={p.id === 'legal-issues'} />
                ))}
              </div>
            </div>
          </div>
        ) : null}

        {/* Portal links */}
        <div className="mt-10 flex flex-wrap gap-3">
          {institutionalPortals.map((p) => (
            <PortalLink key={p.id} portal={p} />
          ))}
        </div>
      </div>
    </section>
  );
}

function CounselPortalButton({ portal, primary }: { portal: InstitutionalPortal; primary?: boolean }) {
  const className = primary
    ? 'inline-flex items-center gap-1.5 rounded-lg border border-indigo-400/50 bg-indigo-500/20 px-4 py-2.5 text-sm font-semibold text-indigo-100 no-underline transition hover:border-indigo-300/60 hover:bg-indigo-500/30'
    : 'inline-flex items-center gap-1.5 rounded-lg border border-gray-700 bg-gray-900/50 px-4 py-2.5 text-sm font-medium text-indigo-200 no-underline transition hover:border-indigo-500/40 hover:text-indigo-100';

  return (
    <Link href={portal.href} className={className}>
      <FileText className="h-4 w-4" aria-hidden />
      {portal.label}
      <ArrowRight className="h-3.5 w-3.5" aria-hidden />
    </Link>
  );
}

function PortalLink({ portal }: { portal: InstitutionalPortal }) {
  return (
    <Link
      href={portal.href}
      className="inline-flex items-center gap-1.5 rounded-lg border border-gray-700 bg-gray-900/50 px-4 py-2 text-sm font-medium text-orange-300 no-underline transition hover:border-orange-500/40 hover:text-orange-200"
    >
      {portal.id.includes('onboard') ? (
        <Building2 className="h-4 w-4" aria-hidden />
      ) : (
        <Globe2 className="h-4 w-4" aria-hidden />
      )}
      {portal.label}
      <ArrowRight className="h-3.5 w-3.5" aria-hidden />
    </Link>
  );
}

function LegalTrackCard({ track }: { track: LegalTrack }) {
  return (
    <Link
      href={track.href}
      className="group block rounded-2xl border border-gray-800 bg-gray-900/40 p-6 no-underline transition hover:border-orange-500/35"
    >
      <div className="flex items-start justify-between gap-3">
        <p className="text-xs font-bold uppercase tracking-wider text-orange-400">Track {track.id}</p>
        <span className="rounded-full bg-gray-800 px-2 py-0.5 text-xs text-gray-400">{track.statusLabel}</span>
      </div>
      <h4 className="mt-2 text-lg font-semibold text-white group-hover:text-orange-100">{track.label}</h4>
      <p className="mt-2 text-sm italic text-gray-500">{track.question}</p>
      <p className="mt-3 text-sm leading-relaxed text-gray-400">{track.summary}</p>
      <span className="mt-4 inline-flex items-center gap-1 text-xs font-medium text-orange-400 group-hover:text-orange-300">
        View counsel corpus
        <ArrowRight className="h-3 w-3" aria-hidden />
      </span>
    </Link>
  );
}

function JourneyStepCard({ step }: { step: OnboardingStep }) {
  return (
    <li className="flex flex-col rounded-xl border border-gray-800 bg-gray-900/30 p-4">
      <span className="text-xs font-mono text-gray-500">Step {step.step}</span>
      <p className="mt-2 text-sm font-semibold text-white">{step.title}</p>
      <p className="mt-2 flex-1 text-xs leading-relaxed text-gray-500">{step.description}</p>
      <Link
        href={step.href}
        className="mt-3 text-xs font-medium text-orange-400 no-underline hover:text-orange-300"
      >
        {step.cta} →
      </Link>
    </li>
  );
}

function JurisdictionCardView({ card }: { card: JurisdictionCard }) {
  return (
    <article className="rounded-xl border border-gray-800 bg-gray-900/30 p-5">
      <div className="flex items-start justify-between gap-2">
        <h4 className="text-sm font-semibold text-white">{card.label}</h4>
        <span
          className={`shrink-0 rounded-md px-2 py-0.5 text-xs font-medium ring-1 ${jurisdictionStatusClass(card.status)}`}
        >
          {card.statusLabel}
        </span>
      </div>
      <p className="mt-3 text-xs leading-relaxed text-gray-500">{card.posture}</p>
      <div className="mt-4 flex flex-col gap-2 text-xs">
        <a href={card.matrixHref} className="text-orange-400 hover:text-orange-300">
          Banking matrix →
        </a>
        {card.perimeterHref ? (
          <a href={card.perimeterHref} className="text-orange-400 hover:text-orange-300">
            Regulatory perimeter →
          </a>
        ) : null}
      </div>
    </article>
  );
}
