'use client';

import React from 'react';

interface RolesAndRanksProps {
  ownerName?: string;
  adminCount?: number;
  memberCount?: number;
}

export function RolesAndRanksSummary({
  ownerName = 'Club Founder',
  adminCount,
  memberCount,
}: RolesAndRanksProps) {
  return (
    <section className="rounded-2xl glass-card border border-brand-border/60 p-5 sm:p-6 space-y-5 shadow-lg">
      {/* Section Header */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
        <div>
          <h2 className="font-headline text-lg sm:text-xl font-bold text-white tracking-tight">
            Roles &amp; Ranks
          </h2>
          <p className="font-body text-xs sm:text-sm text-slate-400 mt-0.5">
            Administrative roles determine software permissions. Club ranks are organizational titles and do not grant additional access.
          </p>
        </div>
        <span className="px-2.5 py-0.5 rounded-full bg-brand-cyan/10 border border-brand-cyan/30 text-brand-cyan font-mono text-[11px] font-semibold tracking-normal self-start sm:self-center">
          RBAC v2.4
        </span>
      </div>

      {/* Split Structure Grid */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-5">
        {/* Left: Administrative Roles (Software Permissions) */}
        <div className="rounded-2xl bg-surface-container/60 border border-brand-border/60 p-5 space-y-4">
          <div className="flex items-center justify-between pb-2.5 border-b border-brand-border/60">
            <div className="flex items-center gap-2">
              <span className="material-symbols-outlined text-brand-cyan text-[18px]">
                verified_user
              </span>
              <span data-section="ADMINISTRATIVE ROLES (Software Permissions)" className="font-headline text-xs font-bold text-white uppercase tracking-wider">
                Administrative Roles (Software Permissions)
              </span>
            </div>
            <span className="font-mono text-[10px] text-slate-400">3 ROLES</span>
          </div>

          <div className="space-y-2.5">
            {/* Owner */}
            <div className="rounded-xl bg-surface-container-high/80 border border-brand-border/60 p-3 flex items-center justify-between">
              <div className="min-w-0">
                <div className="flex items-center gap-2">
                  <span className="px-2 py-0.5 rounded-full bg-amber-400/15 text-amber-400 font-mono text-[10px] font-bold border border-amber-400/40">
                    OWNER
                  </span>
                  <span className="font-headline text-xs font-semibold text-white truncate">
                    {ownerName}
                  </span>
                </div>
                <div className="font-body text-[11px] text-slate-400 mt-1">
                  Full software permissions, billing, ownership transfer.
                </div>
              </div>
              <span className="material-symbols-outlined text-amber-400 text-[20px]">
                admin_panel_settings
              </span>
            </div>

            {/* Admin */}
            <div className="rounded-xl bg-surface-container-high/80 border border-brand-border/60 p-3 flex items-center justify-between">
              <div className="min-w-0">
                <div className="flex items-center gap-2">
                  <span className="px-2 py-0.5 rounded-full bg-brand-cyan/15 text-brand-cyan font-mono text-[10px] font-bold border border-brand-cyan/40">
                    ADMIN
                  </span>
                  <span className="font-headline text-xs font-semibold text-white">
                    {adminCount !== undefined ? `${adminCount} Assigned` : 'Admin Roster'}
                  </span>
                </div>
                <div className="font-body text-[11px] text-slate-400 mt-1">
                  Member administration, applications triage, ride creation.
                </div>
              </div>
              <span className="material-symbols-outlined text-brand-cyan text-[20px]">
                shield
              </span>
            </div>

            {/* Member */}
            <div className="rounded-xl bg-surface-container-high/80 border border-brand-border/60 p-3 flex items-center justify-between">
              <div className="min-w-0">
                <div className="flex items-center gap-2">
                  <span className="px-2 py-0.5 rounded-full bg-surface-container border border-brand-border/80 text-slate-300 font-mono text-[10px] font-semibold">
                    MEMBER
                  </span>
                  <span className="font-headline text-xs font-semibold text-white">
                    {memberCount !== undefined ? `${memberCount} Assigned` : 'Standard Access'}
                  </span>
                </div>
                <div className="font-body text-[11px] text-slate-400 mt-1">
                  Standard authenticated club access, participation.
                </div>
              </div>
              <span className="material-symbols-outlined text-slate-400 text-[20px]">
                group
              </span>
            </div>
          </div>
        </div>

        {/* Right: Club Ranks (Organizational Titles) */}
        <div className="rounded-2xl bg-surface-container/60 border border-brand-border/60 p-5 space-y-4">
          <div className="flex items-center justify-between pb-2.5 border-b border-brand-border/60">
            <div className="flex items-center gap-2">
              <span className="material-symbols-outlined text-brand-cyan text-[18px]">
                military_tech
              </span>
              <span data-section="CLUB RANKS (ORGANIZATIONAL TITLES)" className="font-headline text-xs font-bold text-white uppercase tracking-wider">
                Club Ranks (Organizational Titles)
              </span>
            </div>
            <span className="font-mono text-[10px] text-slate-400">Titles</span>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-2.5">
            <div className="rounded-xl bg-surface-container-high/80 border border-brand-border/60 p-2.5 flex items-center justify-between">
              <span className="font-body text-xs font-medium text-white">President</span>
              <span className="font-mono text-[11px] text-slate-400">Title Only</span>
            </div>
            <div className="rounded-xl bg-surface-container-high/80 border border-brand-border/60 p-2.5 flex items-center justify-between">
              <span className="font-body text-xs font-medium text-white">Vice President</span>
              <span className="font-mono text-[11px] text-slate-400">Title Only</span>
            </div>
            <div className="rounded-xl bg-surface-container-high/80 border border-brand-border/60 p-2.5 flex items-center justify-between">
              <span className="font-body text-xs font-medium text-white">Road Captain</span>
              <span className="font-mono text-[11px] text-brand-cyan font-semibold">Operational</span>
            </div>
            <div className="rounded-xl bg-surface-container-high/80 border border-brand-border/60 p-2.5 flex items-center justify-between">
              <span className="font-body text-xs font-medium text-white">Treasurer</span>
              <span className="font-mono text-[11px] text-slate-400">Title Only</span>
            </div>
            <div className="rounded-xl bg-surface-container-high/80 border border-brand-border/60 p-2.5 flex items-center justify-between">
              <span className="font-body text-xs font-medium text-white">Officer</span>
              <span className="font-mono text-[11px] text-slate-400">Title Only</span>
            </div>
            <div className="rounded-xl bg-surface-container-high/80 border border-brand-border/60 p-2.5 flex items-center justify-between">
              <span className="font-body text-xs font-medium text-white">Full Member</span>
              <span className="font-mono text-[11px] text-slate-400">Title Only</span>
            </div>
            <div className="rounded-xl bg-surface-container-high/80 border border-brand-border/60 p-2.5 flex items-center justify-between sm:col-span-2">
              <span className="font-body text-xs font-medium text-white">Prospect</span>
              <span className="font-mono text-[11px] text-slate-400">Title Only</span>
            </div>
          </div>
        </div>
      </div>

      {/* Bottom RBAC Note verbatim */}
      <div className="p-3.5 rounded-xl bg-surface-container/60 border border-brand-border/60 text-slate-300 flex items-start gap-2.5">
        <span className="material-symbols-outlined text-[18px] text-brand-cyan shrink-0 mt-0.5">
          info
        </span>
        <div className="font-body text-xs">
          <strong className="text-white font-medium">Architecture Note:</strong>{' '}
          Administrative roles determine software permissions. Club ranks are organizational titles and do not grant additional access.
        </div>
      </div>
    </section>
  );
}