"use client"

import { RoleActivityLog } from "@/types/roles"
import { formatDateTime } from "@/lib/format"
import { History, UserPlus, UserCog, ShieldAlert } from "lucide-react"
import { cn } from "@/lib/utils"
import i18n from "@/lib/i18n";

interface ActivityLogListProps {
  logs: RoleActivityLog[]
}

export function ActivityLogList({ logs }: ActivityLogListProps) {
  return (
    <div className="bg-card border border-border rounded-lg overflow-hidden shadow-sm shadow-slate-200/20">
      <div className="p-4 border-b border-border bg-muted/30 flex justify-between items-center">
        <h3 className="text-[12px] font-semibold uppercase tracking-wider text-foreground flex items-center gap-2">
          <History className="h-4 w-4 text-primary" />
          {i18n.t('components.admin.roles.ActivityLogList.text_1')}</h3>
        <button className="text-muted-foreground hover:text-foreground text-[10px] font-bold uppercase tracking-widest transition-colors">{i18n.t('components.admin.roles.ActivityLogList.text_2')}</button>
      </div>
      <div className="p-0">
        <ul className="divide-y divide-border/30">
          {logs.map((log) => {
            const isUserAction = log.action.includes("assigned") || log.action.includes("added user")
            
            return (
              <li key={log.id} className="p-4 flex items-start gap-4 hover:bg-muted/5 transition-colors group">
                <div className={cn(
                  "mt-0.5 p-2 rounded-lg transition-colors",
                  log.risk_level === "high" ? "bg-destructive/10 text-destructive" : "bg-muted text-muted-foreground group-hover:bg-primary/10 group-hover:text-primary"
                )}>
                  {isUserAction ? <UserPlus className="h-4 w-4" /> : <UserCog className="h-4 w-4" />}
                </div>
                <div className="flex-1 min-w-0">
                  <p className="text-[13px] text-foreground leading-snug">
                    <span className="font-bold">{log.actor_name}</span> {log.action}
                  </p>
                  {log.metadata?.added_permission && (
                    <p className="text-[11px] text-muted-foreground mt-1 bg-muted/50 px-2 py-0.5 rounded inline-block border border-border/50">
                      {i18n.t('components.admin.roles.ActivityLogList.text_3')}{log.metadata.added_permission}{i18n.t('components.admin.roles.ActivityLogList.text_4')}{log.metadata.module}.
                    </p>
                  )}
                </div>
                <div className="text-right shrink-0 flex flex-col items-end gap-1">
                  <div className="text-[11px] font-medium text-muted-foreground tabular-nums">
                    {formatDateTime(log.timestamp)}
                  </div>
                  {log.risk_level === "high" && (
                    <span className="flex items-center gap-1 text-[10px] font-bold text-destructive uppercase tracking-tighter">
                      <ShieldAlert className="h-3 w-3" /> {i18n.t('components.admin.roles.ActivityLogList.text_5')}</span>
                  )}
                </div>
              </li>
            )
          })}
        </ul>
      </div>
    </div>
  )
}
