'use client';

import React, { useState } from 'react';
import { AttendanceWithEmployee, AttendanceType, AttendanceStatus } from '@/types/attendance';
import { Avatar } from '@/components/ui/Avatar';
import { Badge, BadgeVariant } from '@/components/ui/Badge';
import { Button } from '@/components/ui/Button';
import {
  Search,
  CheckCircle,
  XCircle,
  Trash2,
  ExternalLink,
  Building2,
  Home,
  Clock,
  FileHeart,
  CalendarDays,
  Plane,
  AlertCircle,
  Calendar,
  Download,
  Eye,
} from 'lucide-react';

interface AttendanceTableProps {
  attendances: AttendanceWithEmployee[];
  isSuperadmin: boolean;
  onUpdateStatus: (id: string, status: AttendanceStatus) => Promise<void>;
  onDelete: (id: string) => Promise<void>;
}

export const AttendanceTable: React.FC<AttendanceTableProps> = ({
  attendances,
  isSuperadmin,
  onUpdateStatus,
  onDelete,
}) => {
  const [searchTerm, setSearchTerm] = useState('');
  const [typeFilter, setTypeFilter] = useState<string>('ALL');
  const [statusFilter, setStatusFilter] = useState<string>('ALL');
  const [dateFilter, setDateFilter] = useState<string>('');

  const filtered = attendances.filter((item) => {
    const empName = item.employee?.full_name || '';
    const empNik = item.employee?.nik || '';
    const notes = item.reason_or_notes || '';

    const matchesSearch =
      empName.toLowerCase().includes(searchTerm.toLowerCase()) ||
      empNik.toLowerCase().includes(searchTerm.toLowerCase()) ||
      notes.toLowerCase().includes(searchTerm.toLowerCase());

    const matchesType = typeFilter === 'ALL' || item.type === typeFilter;
    const matchesStatus = statusFilter === 'ALL' || item.status === statusFilter;
    const matchesDate = !dateFilter || item.date === dateFilter;

    return matchesSearch && matchesType && matchesStatus && matchesDate;
  });

  const getTypeBadgeVariant = (type: AttendanceType): BadgeVariant => {
    switch (type) {
      case 'PRESENT':
        return 'present';
      case 'SICK':
        return 'sick';
      case 'ANNUAL_LEAVE':
        return 'leave';
      case 'LATE_PERMIT':
        return 'late';
      case 'OFFICIAL_TRAVEL':
        return 'travel';
      default:
        return 'neutral';
    }
  };

  const getTypeIcon = (type: AttendanceType) => {
    switch (type) {
      case 'PRESENT':
        return <CheckCircle className="w-3.5 h-3.5 text-emerald-600" />;
      case 'SICK':
        return <FileHeart className="w-3.5 h-3.5 text-rose-600" />;
      case 'ANNUAL_LEAVE':
        return <CalendarDays className="w-3.5 h-3.5 text-purple-600" />;
      case 'LATE_PERMIT':
        return <Clock className="w-3.5 h-3.5 text-amber-600" />;
      case 'OFFICIAL_TRAVEL':
        return <Plane className="w-3.5 h-3.5 text-cyan-600" />;
      default:
        return <AlertCircle className="w-3.5 h-3.5 text-slate-500" />;
    }
  };

  return (
    <div className="space-y-4">
      {/* Filters Bar */}
      <div className="p-4 bg-white rounded-2xl border border-slate-200/90 shadow-sm flex flex-col md:flex-row items-stretch md:items-center justify-between gap-3">
        <div className="relative flex-1">
          <Search className="w-4 h-4 text-slate-400 absolute left-3.5 top-1/2 -translate-y-1/2" />
          <input
            type="text"
            placeholder="Cari karyawan, NIK, atau catatan berita acara..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="w-full pl-10 pr-4 py-2 text-sm bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
          />
        </div>

        <div className="flex flex-wrap items-center gap-2">
          {/* Specific Date Filter */}
          <div className="flex items-center gap-1.5 bg-slate-50 border border-slate-200 px-3 py-1.5 rounded-xl text-xs">
            <Calendar className="w-3.5 h-3.5 text-slate-400" />
            <input
              type="date"
              value={dateFilter}
              onChange={(e) => setDateFilter(e.target.value)}
              className="bg-transparent text-xs font-semibold text-slate-700 focus:outline-none"
            />
            {dateFilter && (
              <button
                onClick={() => setDateFilter('')}
                className="text-slate-400 hover:text-slate-700 ml-1 font-bold"
              >
                &times;
              </button>
            )}
          </div>

          {/* Type Filter */}
          <select
            value={typeFilter}
            onChange={(e) => setTypeFilter(e.target.value)}
            className="px-3 py-2 text-xs font-semibold bg-slate-50 border border-slate-200 rounded-xl text-slate-700 focus:outline-none focus:border-brand-primary"
          >
            <option value="ALL">Semua Jenis Log</option>
            <option value="PRESENT">Hadir (Present)</option>
            <option value="ANNUAL_LEAVE">Cuti Tahunan</option>
            <option value="SICK">Izin Sakit</option>
            <option value="LATE_PERMIT">Izin Terlambat</option>
            <option value="OFFICIAL_TRAVEL">Dinas Luar</option>
            <option value="PERMIT">Izin Khusus</option>
          </select>

          {/* Status Filter */}
          <select
            value={statusFilter}
            onChange={(e) => setStatusFilter(e.target.value)}
            className="px-3 py-2 text-xs font-semibold bg-slate-50 border border-slate-200 rounded-xl text-slate-700 focus:outline-none focus:border-brand-primary"
          >
            <option value="ALL">Semua Status</option>
            <option value="APPROVED">Approved</option>
            <option value="PENDING">Pending Approval</option>
            <option value="REJECTED">Rejected</option>
          </select>
        </div>
      </div>

      {/* Unified Table */}
      <div className="bg-white rounded-2xl border border-slate-200/90 shadow-sm overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full text-left border-collapse">
            <thead>
              <tr className="bg-slate-50/80 border-b border-slate-200/80 text-[11px] font-bold uppercase tracking-wider text-slate-500">
                <th className="py-3.5 px-4">Tanggal</th>
                <th className="py-3.5 px-4">Karyawan</th>
                <th className="py-3.5 px-4">Klasifikasi Log</th>
                <th className="py-3.5 px-4">Clock In / Out</th>
                <th className="py-3.5 px-4">Keterangan / Lampiran</th>
                <th className="py-3.5 px-4">Status</th>
                {isSuperadmin && <th className="py-3.5 px-4 text-right">Aksi HR</th>}
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-100 text-sm">
              {filtered.length === 0 ? (
                <tr>
                  <td colSpan={isSuperadmin ? 7 : 6} className="py-12 text-center text-slate-400">
                    Tidak ada log absensi atau izin yang sesuai dengan filter.
                  </td>
                </tr>
              ) : (
                filtered.map((item) => (
                  <tr key={item.id} className="hover:bg-slate-50/60 transition-colors">
                    {/* Date */}
                    <td className="py-3.5 px-4">
                      <span className="font-mono text-xs font-bold text-slate-800">
                        {item.date}
                      </span>
                    </td>

                    {/* Employee */}
                    <td className="py-3.5 px-4">
                      <div className="flex items-center gap-2.5">
                        <Avatar
                          src={item.employee?.photo_url}
                          name={item.employee?.full_name || 'Staff'}
                          size="sm"
                        />
                        <div>
                          <p className="font-bold text-slate-900 text-xs">
                            {item.employee?.full_name || 'Unknown'}
                          </p>
                          <p className="text-[11px] text-slate-400 font-mono">
                            {item.employee?.department}
                          </p>
                        </div>
                      </div>
                    </td>

                    {/* Type & Mode */}
                    <td className="py-3.5 px-4 space-y-1">
                      <div className="flex items-center gap-1.5">
                        {getTypeIcon(item.type)}
                        <Badge variant={getTypeBadgeVariant(item.type)} size="sm">
                          {item.type.replace(/_/g, ' ')}
                        </Badge>
                      </div>
                      {item.work_mode !== 'OFF' && (
                        <div>
                          <span className="text-[10px] font-bold text-slate-500 uppercase tracking-wider flex items-center gap-1">
                            {item.work_mode === 'WFO' ? (
                              <><Building2 className="w-3 h-3 text-blue-500" /> Office (WFO)</>
                            ) : (
                              <><Home className="w-3 h-3 text-indigo-500" /> Remote (WFH)</>
                            )}
                          </span>
                        </div>
                      )}
                    </td>

                    {/* Timestamps */}
                    <td className="py-3.5 px-4">
                      {item.clock_in ? (
                        <div className="space-y-0.5 text-xs font-mono">
                          <p className="text-slate-800 font-bold">
                            In: {item.clock_in}
                            {item.late_minutes > 0 && (
                              <span className="text-amber-600 font-semibold ml-1.5">
                                (+{item.late_minutes}m)
                              </span>
                            )}
                          </p>
                          <p className="text-slate-500">
                            Out: {item.clock_out || (item.status === 'APPROVED' ? 'Aktif' : '-')}
                          </p>
                        </div>
                      ) : (
                        <span className="text-xs text-slate-400 font-mono">-</span>
                      )}
                    </td>

                    {/* Reason & Attachment */}
                    <td className="py-3.5 px-4 max-w-xs">
                      <p className="text-xs text-slate-700 line-clamp-2">
                        {item.reason_or_notes || '-'}
                      </p>
                      {item.attachment_url && (
                        <div className="flex items-center gap-2 mt-1.5">
                          <a
                            href={item.attachment_url}
                            target="_blank"
                            rel="noreferrer"
                            className="inline-flex items-center gap-1 px-2 py-0.5 rounded-lg bg-brand-light text-brand-primary text-[11px] font-bold hover:bg-brand-pastel/50 transition-colors"
                            title="Buka / Lihat Lampiran"
                          >
                            <Eye className="w-3 h-3" /> Lihat
                          </a>
                          <a
                            href={item.attachment_url}
                            download
                            className="inline-flex items-center gap-1 px-2 py-0.5 rounded-lg bg-slate-100 text-slate-700 text-[11px] font-bold hover:bg-slate-200 transition-colors"
                            title="Unduh File Lampiran"
                          >
                            <Download className="w-3 h-3" /> Unduh
                          </a>
                        </div>
                      )}
                    </td>

                    {/* Status */}
                    <td className="py-3.5 px-4">
                      <Badge
                        variant={
                          item.status === 'APPROVED'
                            ? 'present'
                            : item.status === 'PENDING'
                            ? 'pending'
                            : 'terminated'
                        }
                        size="sm"
                      >
                        {item.status}
                      </Badge>
                    </td>

                    {/* HR Superadmin Actions */}
                    {isSuperadmin && (
                      <td className="py-3.5 px-4 text-right">
                        <div className="flex items-center justify-end gap-1.5">
                          {item.status === 'PENDING' && (
                            <>
                              <button
                                onClick={() => onUpdateStatus(item.id, 'APPROVED')}
                                className="p-1.5 text-emerald-600 hover:bg-emerald-50 rounded-xl transition-colors"
                                title="Setujui Pengajuan"
                              >
                                <CheckCircle className="w-4 h-4" />
                              </button>
                              <button
                                onClick={() => onUpdateStatus(item.id, 'REJECTED')}
                                className="p-1.5 text-red-600 hover:bg-red-50 rounded-xl transition-colors"
                                title="Tolak Pengajuan"
                              >
                                <XCircle className="w-4 h-4" />
                              </button>
                            </>
                          )}
                          <button
                            onClick={() => onDelete(item.id)}
                            className="p-1.5 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded-xl transition-colors"
                            title="Hapus Record"
                          >
                            <Trash2 className="w-4 h-4" />
                          </button>
                        </div>
                      </td>
                    )}
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};