import { Fragment } from 'react';
import { PERMISSION_GROUPS, PERMISSION_PRESETS, ALL_PERMISSIONS } from '@/config/permissions';
import PageHeader from '@/components/workshop/PageHeader';
import { Check, X } from 'lucide-react';

export default function PermissionMatrix() {
  const presetKeys = Object.keys(PERMISSION_PRESETS);
  return (
    <>
      <PageHeader eyebrow="Administration" title="Roles & Permission Matrix"
        description="Permission groups mapped to each preset. Builder permissions are individually customisable per account." />
      <div className="panel overflow-x-auto">
        <table className="w-full text-sm">
          <thead className="bg-shire-raised text-left text-xs uppercase tracking-wider text-shire-text-muted">
            <tr>
              <th className="p-3 text-left">Permission</th>
              {presetKeys.map(k => <th key={k} className="p-3 text-center">{PERMISSION_PRESETS[k].label}</th>)}
            </tr>
          </thead>
          <tbody className="divide-y divide-shire-border">
            {PERMISSION_GROUPS.map(g => (
              <Fragment key={g.group}>
                <tr className="bg-shire-bg/60"><td colSpan={presetKeys.length + 1} className="p-2 px-3 font-semibold text-violet-300">{g.group}</td></tr>
                {g.permissions.map(p => {
                  const allSet = new Set(ALL_PERMISSIONS);
                  return (
                    <tr key={p.key}>
                      <td className="p-3 text-slate-200">{p.label}<div className="text-xs text-shire-text-muted">{p.key}</div></td>
                      {presetKeys.map(k => {
                        const perms = PERMISSION_PRESETS[k].permissions;
                        const has = perms === ALL_PERMISSIONS ? true : perms.includes(p.key);
                        return <td key={k} className="p-3 text-center">{has ? <Check className="mx-auto h-4 w-4 text-emerald-400" /> : <X className="mx-auto h-4 w-4 text-slate-600" />}</td>;
                      })}
                    </tr>
                  );
                })}
              </Fragment>
            ))}
          </tbody>
        </table>
      </div>
      <p className="mt-4 text-xs text-shire-text-muted">Owner Admin always has every permission. The Future Reviewer role is read-only and not publicly registrable. Customised Builder permissions override preset defaults per account.</p>
    </>
  );
}