'use client';

import { useEffect, useState } from 'react';
import { Plus, Trash2, Pencil } from 'lucide-react';
import { useTranslation } from '@/hooks/useTranslation';
import { toast } from '@/lib/toast';
import { handleApiError } from '@/lib/error-handler';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { ResourceCombobox } from '@/components/iam/ResourceCombobox';
import {
  listFieldPermissions,
  createFieldPermission,
  updateFieldPermission,
  deleteFieldPermission,
  type FieldPermission,
  type FieldAccess,
} from '@/services/api/iam-admin';

const ACCESS_LEVELS: FieldAccess[] = ['VISIBLE', 'READONLY', 'HIDDEN', 'DESENSITIZE'];

export function RoleFieldPermissionsTab({ roleId, isBuiltIn }: { roleId: string; isBuiltIn: boolean }) {
  const { t } = useTranslation();
  const [list, setList] = useState<FieldPermission[]>([]);
  const [loading, setLoading] = useState(true);
  const [createOpen, setCreateOpen] = useState(false);
  const [editing, setEditing] = useState<FieldPermission | null>(null);

  const reload = async () => {
    setLoading(true);
    try {
      setList(await listFieldPermissions({ roleId }));
    } catch (e) {
      handleApiError(e, t.locale, { prefix: t.iamAdmin.common.loadFailed });
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => { reload(); }, [roleId]);

  const onDelete = async (fp: FieldPermission) => {
    if (!confirm(t.iamAdmin.fieldPermissions.confirmDelete)) return;
    try {
      await deleteFieldPermission(fp.id);
      toast.success(t.iamAdmin.common.deleted);
      reload();
    } catch (e) {
      handleApiError(e, t.locale, { prefix: t.iamAdmin.common.deleteFailed });
    }
  };

  return (
    <div>
      <div className="mb-4 flex items-center justify-between">
        <div className="text-sm text-gray-500">{t.iamAdmin.fieldPermissions.subtitle}</div>
        <Button onClick={() => setCreateOpen(true)} disabled={isBuiltIn}>
          <Plus className="w-4 h-4 mr-1" />
          {t.iamAdmin.fieldPermissions.newButton}
        </Button>
      </div>

      <div className="bg-white border border-gray-200 rounded-lg">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>{t.iamAdmin.fieldPermissions.columns.resource}</TableHead>
              <TableHead>{t.iamAdmin.fieldPermissions.columns.field}</TableHead>
              <TableHead>{t.iamAdmin.fieldPermissions.columns.access}</TableHead>
              <TableHead className="text-right">{t.iamAdmin.common.actions}</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {loading && <TableRow><TableCell colSpan={4} className="text-center py-8 text-gray-500">{t.iamAdmin.common.loading}</TableCell></TableRow>}
            {!loading && list.length === 0 && <TableRow><TableCell colSpan={4} className="text-center py-8 text-gray-500">{t.iamAdmin.common.empty}</TableCell></TableRow>}
            {list.map((fp) => (
              <TableRow key={fp.id}>
                <TableCell className="font-mono text-sm">{fp.resource}</TableCell>
                <TableCell className="font-mono text-sm">{fp.field}</TableCell>
                <TableCell><span className="font-mono text-xs">{fp.access}</span></TableCell>
                <TableCell className="text-right">
                  <Button variant="ghost" size="sm" onClick={() => setEditing(fp)} disabled={isBuiltIn}>
                    <Pencil className="w-4 h-4" />
                  </Button>
                  <Button variant="ghost" size="sm" onClick={() => onDelete(fp)} disabled={isBuiltIn}>
                    <Trash2 className="w-4 h-4" />
                  </Button>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>

      {createOpen && (
        <FieldPermDialog
          mode="create"
          roleId={roleId}
          onClose={() => setCreateOpen(false)}
          onSaved={() => { setCreateOpen(false); reload(); }}
        />
      )}
      {editing && (
        <FieldPermDialog
          mode="edit"
          roleId={roleId}
          initial={editing}
          onClose={() => setEditing(null)}
          onSaved={() => { setEditing(null); reload(); }}
        />
      )}
    </div>
  );
}

function FieldPermDialog({
  mode, roleId, initial, onClose, onSaved,
}: {
  mode: 'create' | 'edit';
  roleId: string;
  initial?: FieldPermission;
  onClose: () => void;
  onSaved: () => void;
}) {
  const { t } = useTranslation();
  const [resource, setResource] = useState(initial?.resource ?? '*');
  const [field, setField] = useState(initial?.field ?? '');
  const [access, setAccess] = useState<FieldAccess>(initial?.access ?? 'HIDDEN');
  const [submitting, setSubmitting] = useState(false);

  const submit = async () => {
    if (mode === 'create' && (!resource || !field)) {
      toast.error(t.iamAdmin.common.fillRequired);
      return;
    }
    setSubmitting(true);
    try {
      if (mode === 'create') {
        await createFieldPermission({ roleId, resource, field: field.trim(), access });
      } else if (initial) {
        await updateFieldPermission(initial.id, { access });
      }
      toast.success(t.iamAdmin.common.saved);
      onSaved();
    } catch (e) {
      handleApiError(e, t.locale, { prefix: t.iamAdmin.common.saveFailed });
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <Dialog open onOpenChange={(o) => !o && onClose()}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>
            {mode === 'create' ? t.iamAdmin.fieldPermissions.newButton : t.iamAdmin.fieldPermissions.editTitle}
          </DialogTitle>
        </DialogHeader>
        <div className="space-y-4">
          <div>
            <Label>{t.iamAdmin.fieldPermissions.columns.resource}</Label>
            <ResourceCombobox value={resource} onChange={setResource} disabled={mode === 'edit'} />
          </div>
          <div>
            <Label>{t.iamAdmin.fieldPermissions.columns.field}</Label>
            <Input
              value={field}
              onChange={(e) => setField(e.target.value)}
              disabled={mode === 'edit'}
              placeholder="e.g. amount / phone / id_card"
            />
          </div>
          <div>
            <Label>{t.iamAdmin.fieldPermissions.columns.access}</Label>
            <Select value={access} onValueChange={(v) => setAccess(v as FieldAccess)}>
              <SelectTrigger><SelectValue /></SelectTrigger>
              <SelectContent>
                {ACCESS_LEVELS.map((level) => (
                  <SelectItem key={level} value={level}>
                    <div className="flex flex-col">
                      <span className="font-medium">{level}</span>
                      <span className="text-xs text-gray-500">{t.iamAdmin.fieldAccess[level]}</span>
                    </div>
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={onClose}>{t.iamAdmin.common.cancel}</Button>
          <Button onClick={submit} disabled={submitting}>
            {submitting ? t.iamAdmin.common.submitting : t.iamAdmin.common.confirm}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}