'use client'

import { useDashboardI18n } from '@/components/I18nProvider'

type Access = 'full' | 'partial' | 'none'

interface Feature {
  manager: Access
  managerNote?: string
  agent: Access
  agentNote?: string
}

const FEATURES: Feature[] = [
  { manager: 'full',    agent: 'full' },
  { manager: 'full',    agent: 'none' },
  { manager: 'full',    agent: 'none' },
  { manager: 'full',    agent: 'none' },
  { manager: 'full',    agent: 'full' },
  { manager: 'full',    agent: 'full' },
  { manager: 'full',    agent: 'partial' },
  { manager: 'full',    agent: 'full' },
  { manager: 'full',    agent: 'full' },
  { manager: 'full',    agent: 'full' },
  { manager: 'full',    agent: 'partial' },
  { manager: 'full',    agent: 'none' },
  { manager: 'full',    agent: 'none' },
  { manager: 'full',    agent: 'none' },
  { manager: 'full',    agent: 'none' },
  { manager: 'full',    agent: 'full' },
  { manager: 'none',    agent: 'none' },
  { manager: 'none',    agent: 'none' },
  { manager: 'none',    agent: 'none' },
  { manager: 'none',    agent: 'none' },
]

const copy = {
  en: {
    heading: 'Role permissions',
    subtitle: 'What each role can do across the dashboard. Owners have full access to everything.',
    colFeature: 'Feature',
    colManager: 'Manager',
    colAgent: 'Agent',
    full: 'Full',
    noAccess: 'No access',
    limited: 'Limited',
    featureLabels: [
      'View fleet & vehicles',
      'Add / edit vehicles',
      'Publish / unpublish vehicle',
      'Upload vehicle photos',
      'View reservations',
      'Create reservations',
      'Cancel reservations',
      'Check-in / check-out',
      'Damage inspection',
      'Customer CRM — view',
      'Customer CRM — edit',
      'Approve driver licenses',
      'Flag / blacklist customer',
      'Offers & promotions',
      'Analytics & reports',
      'Contract & invoice PDF',
      'Billing & subscription',
      'Invite / remove staff',
      'Brand & site settings',
      'Payment settings',
    ],
    agentNotes: ['', '', '', '', '', '', 'Own only', '', '', '', 'Notes only', '', '', '', '', '', '', '', '', ''],
  },
    fr: {
      heading: 'Permissions par rôle',
    subtitle: 'Ce que chaque rôle peut faire dans l’espace de travail. Les propriétaires ont un accès complet à l’ensemble du système.',
    colFeature: 'Fonctionnalité',
    colManager: 'Manager',
    colAgent: 'Agent',
    full: 'Complet',
    noAccess: 'Aucun accès',
    limited: 'Limité',
    featureLabels: [
      'Voir la flotte et les véhicules',
      'Ajouter / modifier des véhicules',
      'Publier / dépublier un véhicule',
      'Téléverser des photos de véhicule',
      'Voir les réservations',
      'Créer des réservations',
      'Annuler des réservations',
      'Départ / retour',
      'Inspection des dommages',
      'CRM clients — consultation',
      'CRM clients — modification',
      'Approuver les permis de conduire',
      'Signaler / bloquer un client',
      'Offres et promotions',
      'Analyses et rapports',
      'Contrat et facture PDF',
      'Facturation et abonnement',
      'Inviter / supprimer des membres de l’équipe',
      'Paramètres marque et site',
      'Paramètres de paiement',
    ],
    agentNotes: ['', '', '', '', '', '', 'Les siennes uniquement', '', '', '', 'Notes uniquement', '', '', '', '', '', '', '', '', ''],
  },
  ar: {
    heading: 'صلاحيات الأدوار',
    subtitle: 'ما يمكن لكل دور القيام به داخل مساحة العمل. يملك المالكون صلاحية كاملة على كل شيء.',
    colFeature: 'الميزة',
    colManager: 'المدير',
    colAgent: 'الوكيل',
    full: 'كامل',
    noAccess: 'لا وصول',
    limited: 'محدود',
    featureLabels: [
      'عرض الأسطول والمركبات',
      'إضافة / تعديل المركبات',
      'نشر / إلغاء نشر المركبة',
      'رفع صور المركبة',
      'عرض الحجوزات',
      'إنشاء الحجوزات',
      'إلغاء الحجوزات',
      'الاستلام / الإرجاع',
      'فحص الأضرار',
      'إدارة العملاء — عرض',
      'إدارة العملاء — تعديل',
      'الموافقة على رخص القيادة',
      'تمييز العميل / حظره',
      'العروض والحملات الترويجية',
      'التحليلات والتقارير',
      'العقد والفاتورة بصيغة PDF',
      'الفوترة والاشتراك',
      'دعوة / إزالة الموظفين',
      'إعدادات العلامة والموقع',
      'إعدادات الدفع',
    ],
    agentNotes: ['', '', '', '', '', '', 'حجوزاته فقط', '', '', '', 'الملاحظات فقط', '', '', '', '', '', '', '', '', ''],
  },
}

function AccessCell({ access, label, limitedNote }: { access: Access; label: { full: string; noAccess: string; limited: string }; limitedNote: string }) {
  if (access === 'full') {
    return (
      <div className="flex items-center gap-1.5">
        <svg className="w-3.5 h-3.5 text-green-600 dark:text-green-400 flex-shrink-0" fill="none" viewBox="0 0 14 14">
          <path d="M2.5 7L5.5 10L11.5 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
        <span className="text-xs text-zinc-700 dark:text-zinc-300">{label.full}</span>
      </div>
    )
  }
  if (access === 'partial') {
    return (
      <div className="flex items-center gap-1.5">
        <div className="w-3.5 h-3.5 flex-shrink-0 flex items-center justify-center">
          <div className="w-2.5 h-0.5 rounded bg-orange-500" />
        </div>
        <span className="text-xs text-orange-700 dark:text-orange-400">{limitedNote || label.limited}</span>
      </div>
    )
  }
  return (
    <div className="flex items-center gap-1.5">
      <div className="w-3.5 h-3.5 flex-shrink-0 flex items-center justify-center">
        <div className="w-2 h-0.5 rounded bg-zinc-300 dark:bg-zinc-600" />
      </div>
      <span className="text-xs text-zinc-400 dark:text-zinc-600">{label.noAccess}</span>
    </div>
  )
}

export default function PermissionsMatrix() {
  const { language } = useDashboardI18n()
  const t = copy[language]

  return (
    <div dir={language === 'ar' ? 'rtl' : 'ltr'}>
      <div className="mb-4">
        <h2 className="text-base font-medium text-zinc-900 dark:text-white">{t.heading}</h2>
        <p className="text-sm text-zinc-500 dark:text-zinc-400 mt-0.5">{t.subtitle}</p>
      </div>

      <div className="border border-zinc-200 dark:border-zinc-700 rounded-xl overflow-hidden">
        <div className="grid grid-cols-[1fr_120px_120px] bg-zinc-50 dark:bg-zinc-800/50 border-b border-zinc-200 dark:border-zinc-700">
          <div className="px-4 py-2.5 text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wide">
            {t.colFeature}
          </div>
          <div className="px-4 py-2.5 text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wide border-l border-zinc-200 dark:border-zinc-700">
            {t.colManager}
          </div>
          <div className="px-4 py-2.5 text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wide border-l border-zinc-200 dark:border-zinc-700">
            {t.colAgent}
          </div>
        </div>

        {FEATURES.map((feature, i) => (
          <div
            key={i}
            className={[
              'grid grid-cols-[1fr_120px_120px]',
              i < FEATURES.length - 1 ? 'border-b border-zinc-100 dark:border-zinc-800' : '',
              i % 2 === 0 ? '' : 'bg-zinc-50/50 dark:bg-zinc-800/20',
            ].join(' ')}
          >
            <div className="px-4 py-2.5 text-xs text-zinc-600 dark:text-zinc-400">
              {t.featureLabels[i]}
            </div>
            <div className="px-4 py-2.5 border-l border-zinc-100 dark:border-zinc-800">
              <AccessCell
                access={feature.manager}
                label={{ full: t.full, noAccess: t.noAccess, limited: t.limited }}
                limitedNote={feature.managerNote ?? ''}
              />
            </div>
            <div className="px-4 py-2.5 border-l border-zinc-100 dark:border-zinc-800">
              <AccessCell
                access={feature.agent}
                label={{ full: t.full, noAccess: t.noAccess, limited: t.limited }}
                limitedNote={t.agentNotes[i] ?? ''}
              />
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}
