import React, { useState } from 'react';
import { AppLayout } from '../../components/layout/AppLayout';
import {
  Shield,
  Check,
  X,
  Minus,
  Crown,
  UserCog,
  User,
  Users,
  Eye,
  Lock,
  Unlock,
  Key,
} from 'lucide-react';

interface Permission {
  name: string;
  description: string;
}

interface RoleDef {
  id: string;
  label: string;
  icon: React.ReactNode;
  color: string;
  bgColor: string;
  description: string;
  permissions: Record<string, boolean>;
}

const PLATFORM_PERMISSIONS: Permission[] = [
  { name: 'Manage All Organizations', description: 'Create, edit, delete any organization' },
  { name: 'Manage All Users', description: 'Add, remove, modify any user account' },
  { name: 'View All Analytics', description: 'Access analytics across all organizations' },
  { name: 'Manage Integrations', description: 'Configure platform-wide integrations' },
  { name: 'View Audit Logs', description: 'Access full audit trail' },
  { name: 'Manage Portfolios', description: 'Create and manage portfolio groups' },
  { name: 'Manage Partners', description: 'Add and configure partner workspaces' },
  { name: 'Manage Email Campaigns', description: 'Create and manage email campaigns' },
  { name: 'Manage Leads', description: 'View and manage all leads platform-wide' },
  { name: 'System Settings', description: 'Modify platform-wide settings' },
];

const COMPANY_PERMISSIONS: Permission[] = [
  { name: 'Edit Company Profile', description: 'Modify company name, details, settings' },
  { name: 'Manage Company Users', description: 'Add/remove users within this company' },
  { name: 'View Company Analytics', description: 'Access company-specific analytics' },
  { name: 'Manage CRM Records', description: 'Create/edit/delete contacts, deals, leads' },
  { name: 'Manage Goals & Forecasts', description: 'Set and modify goals and forecasting data' },
  { name: 'View Company Audit Log', description: 'Access this company audit trail' },
];

const PLATFORM_ROLES: RoleDef[] = [
  {
    id: 'super_admin',
    label: 'Super Admin',
    icon: <Crown className="h-4 w-4" />,
    color: 'text-red-700',
    bgColor: 'bg-red-100',
    description: 'Full platform access across all organizations',
    permissions: {
      'Manage All Organizations': true,
      'Manage All Users': true,
      'View All Analytics': true,
      'Manage Integrations': true,
      'View Audit Logs': true,
      'Manage Portfolios': true,
      'Manage Partners': true,
      'Manage Email Campaigns': true,
      'Manage Leads': true,
      'System Settings': true,
    },
  },
  {
    id: 'admin',
    label: 'Admin',
    icon: <UserCog className="h-4 w-4" />,
    color: 'text-orange-700',
    bgColor: 'bg-orange-100',
    description: 'Full access within their organization',
    permissions: {
      'Manage All Organizations': false,
      'Manage All Users': false,
      'View All Analytics': false,
      'Manage Integrations': false,
      'View Audit Logs': true,
      'Manage Portfolios': false,
      'Manage Partners': false,
      'Manage Email Campaigns': true,
      'Manage Leads': true,
      'System Settings': false,
    },
  },
  {
    id: 'partner',
    label: 'Partner',
    icon: <Users className="h-4 w-4" />,
    color: 'text-blue-700',
    bgColor: 'bg-blue-100',
    description: 'Isolated partner workspace access',
    permissions: {
      'Manage All Organizations': false,
      'Manage All Users': false,
      'View All Analytics': false,
      'Manage Integrations': false,
      'View Audit Logs': false,
      'Manage Portfolios': false,
      'Manage Partners': false,
      'Manage Email Campaigns': false,
      'Manage Leads': false,
      'System Settings': false,
    },
  },
  {
    id: 'user',
    label: 'User',
    icon: <User className="h-4 w-4" />,
    color: 'text-gray-600',
    bgColor: 'bg-gray-100',
    description: 'Basic access within their organization',
    permissions: {
      'Manage All Organizations': false,
      'Manage All Users': false,
      'View All Analytics': false,
      'Manage Integrations': false,
      'View Audit Logs': false,
      'Manage Portfolios': false,
      'Manage Partners': false,
      'Manage Email Campaigns': false,
      'Manage Leads': false,
      'System Settings': false,
    },
  },
];

const COMPANY_ROLES_DATA: RoleDef[] = [
  {
    id: 'owner',
    label: 'Owner',
    icon: <Crown className="h-4 w-4" />,
    color: 'text-purple-700',
    bgColor: 'bg-purple-100',
    description: 'Full ownership with all company permissions',
    permissions: {
      'Edit Company Profile': true,
      'Manage Company Users': true,
      'View Company Analytics': true,
      'Manage CRM Records': true,
      'Manage Goals & Forecasts': true,
      'View Company Audit Log': true,
    },
  },
  {
    id: 'admin',
    label: 'Admin',
    icon: <UserCog className="h-4 w-4" />,
    color: 'text-indigo-700',
    bgColor: 'bg-indigo-100',
    description: 'Full admin within company except ownership',
    permissions: {
      'Edit Company Profile': true,
      'Manage Company Users': true,
      'View Company Analytics': true,
      'Manage CRM Records': true,
      'Manage Goals & Forecasts': true,
      'View Company Audit Log': true,
    },
  },
  {
    id: 'manager',
    label: 'Manager',
    icon: <User className="h-4 w-4" />,
    color: 'text-emerald-700',
    bgColor: 'bg-emerald-100',
    description: 'Can manage CRM and goals but not users',
    permissions: {
      'Edit Company Profile': false,
      'Manage Company Users': false,
      'View Company Analytics': true,
      'Manage CRM Records': true,
      'Manage Goals & Forecasts': true,
      'View Company Audit Log': false,
    },
  },
  {
    id: 'rep',
    label: 'Rep',
    icon: <Eye className="h-4 w-4" />,
    color: 'text-amber-700',
    bgColor: 'bg-amber-100',
    description: 'Can manage CRM records only',
    permissions: {
      'Edit Company Profile': false,
      'Manage Company Users': false,
      'View Company Analytics': false,
      'Manage CRM Records': true,
      'Manage Goals & Forecasts': false,
      'View Company Audit Log': false,
    },
  },
  {
    id: 'viewer',
    label: 'Viewer',
    icon: <Eye className="h-4 w-4" />,
    color: 'text-slate-600',
    bgColor: 'bg-slate-100',
    description: 'Read-only access to company data',
    permissions: {
      'Edit Company Profile': false,
      'Manage Company Users': false,
      'View Company Analytics': false,
      'Manage CRM Records': false,
      'Manage Goals & Forecasts': false,
      'View Company Audit Log': false,
    },
  },
];

function PermissionCell({ has }: { has: boolean }) {
  if (has) {
    return (
      <div className="flex justify-center">
        <div className="flex h-6 w-6 items-center justify-center rounded bg-green-100">
          <Check className="h-3.5 w-3.5 text-green-600" />
        </div>
      </div>
    );
  }
  return (
    <div className="flex justify-center">
      <div className="flex h-6 w-6 items-center justify-center rounded bg-surface-100">
        <Minus className="h-3.5 w-3.5 text-surface-400" />
      </div>
    </div>
  );
}

function RolePermissionsTable({
  roles,
  permissions,
  title,
}: {
  roles: RoleDef[];
  permissions: Permission[];
  title: string;
}) {
  return (
    <div className="rounded-xl border border-surface-200 bg-white overflow-hidden">
      <div className="border-b border-surface-200 px-5 py-4">
        <h3 className="text-sm font-semibold text-surface-900">{title}</h3>
      </div>
      <div className="overflow-x-auto">
        <table className="w-full text-xs">
          <thead>
            <tr className="border-b border-surface-200">
              <th className="pb-3 pl-5 text-left font-medium text-surface-500 min-w-[160px]">Role</th>
              {permissions.map((perm) => (
                <th key={perm.name} className="pb-3 px-2 text-center font-medium text-surface-500 whitespace-nowrap min-w-[80px]">
                  {perm.name}
                </th>
              ))}
            </tr>
          </thead>
          <tbody className="divide-y divide-surface-100">
            {roles.map((role) => (
              <tr key={role.id} className="hover:bg-surface-50">
                <td className="py-3 pl-5">
                  <div className="flex items-center gap-2">
                    <div className={`flex h-7 w-7 items-center justify-center rounded-lg ${role.bgColor} ${role.color}`}>
                      {role.icon}
                    </div>
                    <div>
                      <p className="text-sm font-medium text-surface-900">{role.label}</p>
                      <p className="text-xs text-surface-500">{role.description}</p>
                    </div>
                  </div>
                </td>
                {permissions.map((perm) => (
                  <td key={perm.name} className="py-3 px-2">
                    <PermissionCell has={role.permissions[perm.name] ?? false} />
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

export function AccessLevelsPage() {
  const [activeTab, setActiveTab] = useState<'platform' | 'company'>('platform');

  return (
    <AppLayout title="Access Levels">
      {/* Header */}
      <div className="mb-6">
        <h1 className="text-xl sm:text-2xl font-bold text-surface-900">Access Levels</h1>
        <p className="mt-1 text-sm text-surface-500">
          Role-based access control configuration for platform and company permissions
        </p>
        <div className="mt-2 flex items-center gap-2">
          <div className="flex h-5 w-5 items-center justify-center rounded bg-brand-100">
            <Key className="h-3 w-3 text-brand-600" />
          </div>
          <span className="text-xs text-surface-500">
            Roles define what users can see and do. Users inherit permissions from both their Platform Role and Company Role.
          </span>
        </div>
      </div>

      {/* Tab Navigation */}
      <div className="mb-6 flex gap-2">
        <button
          onClick={() => setActiveTab('platform')}
          className={`inline-flex items-center gap-2 rounded-lg px-4 py-2.5 text-sm font-medium min-h-[44px] transition-colors ${
            activeTab === 'platform'
              ? 'bg-brand-600 text-white'
              : 'bg-white border border-surface-300 text-surface-700 hover:bg-surface-50'
          }`}
        >
          <Shield className="h-4 w-4" />
          Platform Roles
        </button>
        <button
          onClick={() => setActiveTab('company')}
          className={`inline-flex items-center gap-2 rounded-lg px-4 py-2.5 text-sm font-medium min-h-[44px] transition-colors ${
            activeTab === 'company'
              ? 'bg-brand-600 text-white'
              : 'bg-white border border-surface-300 text-surface-700 hover:bg-surface-50'
          }`}
        >
          <UserCog className="h-4 w-4" />
          Company Roles
        </button>
      </div>

      {/* Info Banner */}
      <div className="mb-6 flex items-start gap-3 rounded-lg border border-blue-200 bg-blue-50 px-4 py-3">
        <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-blue-100">
          <Lock className="h-4 w-4 text-blue-600" />
        </div>
        <div>
          <p className="text-sm font-medium text-blue-800">
            {activeTab === 'platform'
              ? 'Platform roles control cross-organization access'
              : 'Company roles control within-organization permissions'}
          </p>
          <p className="text-xs text-blue-600 mt-0.5">
            {activeTab === 'platform'
              ? 'Super Admins have unrestricted access. Admins are scoped to their organization. Partners have isolated workspaces.'
              : 'Owner has full control. Admin mirrors Owner without ownership rights. Manager handles CRM and goals. Rep manages records only. Viewer is read-only.'}
          </p>
        </div>
      </div>

      {/* Permission Matrix */}
      <div className="space-y-6">
        {activeTab === 'platform' ? (
          <RolePermissionsTable
            roles={PLATFORM_ROLES}
            permissions={PLATFORM_PERMISSIONS}
            title="Platform Role Permissions Matrix"
          />
        ) : (
          <RolePermissionsTable
            roles={COMPANY_ROLES_DATA}
            permissions={COMPANY_PERMISSIONS}
            title="Company Role Permissions Matrix"
          />
        )}
      </div>

      {/* Role Summary Cards */}
      <div className="mt-6">
        <h3 className="mb-3 text-sm font-semibold text-surface-900">
          {activeTab === 'platform' ? 'Platform Role Summary' : 'Company Role Summary'}
        </h3>
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {(activeTab === 'platform' ? PLATFORM_ROLES : COMPANY_ROLES_DATA).map((role) => {
            const allowed = Object.values(role.permissions).filter(Boolean).length;
            const total = Object.keys(role.permissions).length;
            const pct = Math.round((allowed / total) * 100);

            return (
              <div key={role.id} className="rounded-xl border border-surface-200 bg-white p-4">
                <div className="flex items-center gap-3 mb-3">
                  <div className={`flex h-10 w-10 items-center justify-center rounded-lg ${role.bgColor} ${role.color}`}>
                    {role.icon}
                  </div>
                  <div className="min-w-0 flex-1">
                    <p className="text-sm font-semibold text-surface-900">{role.label}</p>
                    <p className="text-xs text-surface-500 truncate">{role.description}</p>
                  </div>
                </div>
                <div className="mt-3">
                  <div className="flex items-center justify-between text-xs text-surface-500 mb-1">
                    <span>Permissions</span>
                    <span className="font-medium">{allowed}/{total} ({pct}%)</span>
                  </div>
                  <div className="h-2 w-full overflow-hidden rounded-full bg-surface-100">
                    <div
                      className={`h-full rounded-full ${role.bgColor.replace('/10', '').replace('bg-', 'bg-')}`}
                      style={{ width: `${pct}%` }}
                    />
                  </div>
                </div>
                {allowed === 0 && (
                  <div className="mt-2 flex items-center gap-1">
                    <Lock className="h-3 w-3 text-surface-400" />
                    <span className="text-xs text-surface-400">View-only access</span>
                  </div>
                )}
                {allowed === total && (
                  <div className="mt-2 flex items-center gap-1">
                    <Unlock className="h-3 w-3 text-green-500" />
                    <span className="text-xs text-green-600">Full access</span>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </AppLayout>
  );
}