import { useState, useEffect } from 'react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Plus, Shield, Edit, Eye } from 'lucide-react';
import { userApi } from '@/services/api';
import type { Role } from '@/types';

interface SystemRolesTabProps {
  selectedRole: Role | null;
  setSelectedRole: (role: Role | null) => void;
}

// 将后端角色数据规范化为前端 Role 类型 // Logan.Li
function normalizeRole(raw: any): Role {
  return {
    id: String(raw.id ?? ''),
    name: raw.name ?? '',
    code: raw.code ?? '',
    description: raw.description ?? '',
    // 后端可能不返回 permissions/createdAt，给予默认值以避免渲染崩溃
    permissions: Array.isArray(raw.permissions) ? raw.permissions : [],
    createdAt: raw.createdAt ?? raw.created_at ?? '',
  };
}

export function SystemRolesTab({ selectedRole, setSelectedRole }: SystemRolesTabProps) {
  const [roles, setRoles] = useState<Role[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;
    (async () => {
      setLoading(true);
      try {
        const resp = await userApi.getRoles();
        if (cancelled) return;
        const list = resp?.list ?? [];
        setRoles(list.map(normalizeRole));
      } catch (err) {
        if (!cancelled) setRoles([]);
      } finally {
        if (!cancelled) setLoading(false);
      }
    })();
    return () => {
      cancelled = true;
    };
  }, []);

  return (
    <>
      <div className="flex items-center justify-end">
        <Button className="bg-blue-600 hover:bg-blue-700 text-white">
          <Plus className="h-4 w-4 mr-2" />
          新建角色
        </Button>
      </div>

      {loading ? (
        <div className="flex items-center justify-center py-16">
          <div className="w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
        </div>
      ) : roles.length === 0 ? (
        <div className="flex flex-col items-center justify-center py-16 text-slate-500">
          <Shield className="h-10 w-10 mb-3 opacity-40" />
          <p className="text-sm">暂无角色数据</p>
        </div>
      ) : (
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
          {roles.map((role) => (
            <Card key={role.id} className="bg-slate-900 border-slate-800">
              <CardHeader className="pb-2">
                <div className="flex items-start justify-between">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-lg bg-purple-500/10 flex items-center justify-center">
                      <Shield className="h-5 w-5 text-purple-400" />
                    </div>
                    <div>
                      <CardTitle className="text-base text-slate-100">{role.name}</CardTitle>
                      <CardDescription className="text-slate-500">{role.code}</CardDescription>
                    </div>
                  </div>
                  <div className="flex items-center gap-1">
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-8 w-8 text-slate-400 hover:text-slate-100"
                      onClick={() => setSelectedRole(role)}
                    >
                      <Eye className="h-4 w-4" />
                    </Button>
                    <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-slate-100">
                      <Edit className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-slate-400 mb-3">{role.description}</p>
                <div className="flex flex-wrap gap-1">
                  {role.permissions.slice(0, 5).map((permission) => (
                    <Badge key={permission} variant="outline" className="border-slate-700 text-slate-400 text-xs">
                      {permission}
                    </Badge>
                  ))}
                  {role.permissions.length > 5 && (
                    <Badge variant="outline" className="border-slate-700 text-slate-400 text-xs">
                      +{role.permissions.length - 5}
                    </Badge>
                  )}
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      )}
    </>
  );
}