import Link from 'next/link';
import { notFound } from 'next/navigation';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';
import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import {
  getTrainingStatusLabel,
  getTrainingTypeLabel
} from '@/constants/thai-labels';
import { formatDate } from '@/lib/format';
import { Icons } from '@/components/icons';
import { getEmployeeDirectoryDetail } from '../server/employee-directory-data';

function formatHours(value: number) {
  return new Intl.NumberFormat('th-TH', {
    minimumFractionDigits: value % 1 === 0 ? 0 : 1,
    maximumFractionDigits: 1
  }).format(value);
}

function DetailField({
  label,
  value
}: {
  label: string;
  value: string;
}) {
  return (
    <div className='space-y-1'>
      <div className='text-muted-foreground text-sm'>{label}</div>
      <div className='font-medium break-words'>{value || '-'}</div>
    </div>
  );
}

function SummaryCard({
  title,
  value,
  helper
}: {
  title: string;
  value: string;
  helper: string;
}) {
  return (
    <Card>
      <CardHeader className='space-y-1 pb-3'>
        <CardDescription>{title}</CardDescription>
        <CardTitle className='text-2xl'>{value}</CardTitle>
      </CardHeader>
      <CardContent className='text-muted-foreground text-sm'>{helper}</CardContent>
    </Card>
  );
}

export async function EmployeeDirectoryDetailPage({
  organizationId,
  employeeId
}: {
  organizationId: string;
  employeeId: string;
}) {
  const detail = await getEmployeeDirectoryDetail({ organizationId, employeeId });

  if (!detail) {
    notFound();
  }

  return (
    <div className='flex min-w-0 flex-1 flex-col gap-6'>
      <Card>
        <CardHeader className='flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between'>
          <div className='flex min-w-0 items-start gap-4'>
            <Avatar className='h-14 w-14'>
              <AvatarFallback className='bg-primary/10 text-primary text-lg font-semibold'>
                {detail.user.fullName
                  .split(' ')
                  .filter(Boolean)
                  .slice(0, 2)
                  .map((part) => part[0])
                  .join('')}
              </AvatarFallback>
            </Avatar>
            <div className='min-w-0 space-y-2'>
              <div className='space-y-1'>
                <CardTitle className='text-xl'>{detail.user.fullName}</CardTitle>
                <CardDescription>
                  รายละเอียดข้อมูลพนักงาน ชั่วโมงอบรม และประวัติการอบรมรายบุคคล
                </CardDescription>
              </div>
              <div className='flex flex-wrap items-center gap-2'>
                <Badge variant='outline'>{detail.user.employeeCode ?? '-'}</Badge>
                <Badge variant={detail.user.status === 'Active' ? 'default' : 'secondary'}>
                  {detail.user.status === 'Active' ? 'ใช้งาน' : 'ปิดใช้งาน'}
                </Badge>
              </div>
            </div>
          </div>

          <div className='flex w-full flex-col gap-2 sm:w-auto sm:flex-row'>
            <Button asChild variant='outline'>
              <Link href={`/dashboard/employee-directory/${detail.user.id}/edit`}>
                <Icons.edit className='mr-2 h-4 w-4' />
                แก้ไขข้อมูลพนักงาน
              </Link>
            </Button>
            <Button asChild variant='outline'>
              <Link href={`/dashboard/employee-directory/${detail.user.id}/targets`}>
                <Icons.award className='mr-2 h-4 w-4' />
                กำหนดเป้าหมาย K/S/A
              </Link>
            </Button>
            <Button asChild variant='outline'>
              <Link href='/dashboard/employee-directory'>กลับไปยังรายชื่อพนักงานทั้งหมด</Link>
            </Button>
          </div>
        </CardHeader>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>ข้อมูลทั่วไป</CardTitle>
        </CardHeader>
        <CardContent className='grid gap-4 sm:grid-cols-2 xl:grid-cols-4'>
          <DetailField label='รหัสพนักงาน' value={detail.user.employeeCode ?? '-'} />
          <DetailField label='ชื่อพนักงาน' value={detail.user.fullName} />
          <DetailField label='อีเมล' value={detail.user.email ?? '-'} />
          <DetailField label='บริษัท' value={detail.user.companyName ?? '-'} />
          <DetailField label='ฝ่าย' value={detail.user.departmentName ?? '-'} />
          <DetailField label='ตำแหน่ง' value={detail.user.positionName ?? '-'} />
          <DetailField label='องค์กร' value={detail.user.organizationName} />
          <DetailField
            label='สถานะ'
            value={detail.user.status === 'Active' ? 'ใช้งาน' : 'ปิดใช้งาน'}
          />
        </CardContent>
      </Card>

      <div className='grid gap-4 md:grid-cols-2 xl:grid-cols-5'>
        <SummaryCard
          title={`ชั่วโมงอนุมัติ ปี ${detail.summary.year + 543}`}
          value={formatHours(detail.summary.approvedHours)}
          helper='รวมชั่วโมงจากรายการที่อนุมัติแล้ว'
        />
        <SummaryCard
          title='ชั่วโมงรอตรวจสอบ'
          value={formatHours(detail.summary.pendingHours)}
          helper='รวมรายการที่รอผลหรือถูกขอแก้ไข'
        />
        <SummaryCard
          title='ชั่วโมงไม่อนุมัติ'
          value={formatHours(detail.summary.rejectedHours)}
          helper='รวมรายการที่ถูกปฏิเสธ'
        />
        <SummaryCard
          title='ชั่วโมงรวม'
          value={formatHours(detail.summary.totalHours)}
          helper='อนุมัติแล้ว + รอตรวจสอบ + ไม่อนุมัติ'
        />
        <SummaryCard
          title='ความคืบหน้า'
          value={`${formatHours(detail.summary.completionPercent)}%`}
          helper={`เทียบกับเป้าหมาย ${formatHours(detail.summary.targetTotalHours)} ชั่วโมง`}
        />
      </div>

      <Card>
        <CardHeader>
          <CardTitle>Training Summary</CardTitle>
          <CardDescription>สรุปเป้าหมายและความคืบหน้า K / S / A</CardDescription>
        </CardHeader>
        <CardContent className='space-y-5'>
          <div className='space-y-2'>
            <div className='flex items-center justify-between gap-4 text-sm'>
              <span className='font-medium'>Progress</span>
              <span className='text-muted-foreground'>
                {formatHours(detail.summary.approvedHours)} / {formatHours(detail.summary.targetTotalHours)} ชั่วโมง
              </span>
            </div>
            <Progress value={detail.summary.completionPercent} />
          </div>

          <div className='grid gap-4 md:grid-cols-3'>
            <div className='rounded-lg border p-4'>
              <div className='text-muted-foreground text-sm'>Knowledge (ความรู้)</div>
              <div className='mt-2 text-2xl font-semibold'>
                {formatHours(detail.ksaSummary.approvedK)} / {formatHours(detail.ksaSummary.targetK)}
              </div>
              <div className='text-muted-foreground mt-1 text-sm'>Approved / Target</div>
            </div>
            <div className='rounded-lg border p-4'>
              <div className='text-muted-foreground text-sm'>Skill (ทักษะ)</div>
              <div className='mt-2 text-2xl font-semibold'>
                {formatHours(detail.ksaSummary.approvedS)} / {formatHours(detail.ksaSummary.targetS)}
              </div>
              <div className='text-muted-foreground mt-1 text-sm'>Approved / Target</div>
            </div>
            <div className='rounded-lg border p-4'>
              <div className='text-muted-foreground text-sm'>Attitude (ทัศนคติ)</div>
              <div className='mt-2 text-2xl font-semibold'>
                {formatHours(detail.ksaSummary.approvedA)} / {formatHours(detail.ksaSummary.targetA)}
              </div>
              <div className='text-muted-foreground mt-1 text-sm'>Approved / Target</div>
            </div>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>ประวัติการอบรม</CardTitle>
          <CardDescription>แสดงรายการอบรมทั้งหมดของพนักงานรายนี้</CardDescription>
        </CardHeader>
        <CardContent className='min-w-0'>
          <ScrollArea className='w-full max-w-full'>
            <table className='w-full min-w-[880px] text-sm'>
              <thead className='bg-muted/60 text-left'>
                <tr className='border-b'>
                  <th className='px-3 py-2 font-medium'>วันที่</th>
                  <th className='px-3 py-2 font-medium'>หลักสูตร</th>
                  <th className='px-3 py-2 font-medium'>ประเภท</th>
                  <th className='px-3 py-2 font-medium'>ชั่วโมง</th>
                  <th className='px-3 py-2 font-medium'>สถานะ</th>
                  <th className='px-3 py-2 font-medium'>เกียรติบัตร</th>
                </tr>
              </thead>
              <tbody>
                {detail.records.length > 0 ? (
                  detail.records.map((record) => (
                    <tr key={record.id} className='border-b last:border-b-0'>
                      <td className='px-3 py-3 whitespace-nowrap'>
                        {formatDate(record.trainingDate, { month: 'numeric' })}
                      </td>
                      <td className='px-3 py-3'>
                        <Link
                          href={`/dashboard/training-records/${record.id}`}
                          className='hover:text-primary font-medium underline-offset-4 hover:underline'
                        >
                          {record.courseName}
                        </Link>
                      </td>
                      <td className='px-3 py-3 whitespace-nowrap'>
                        {getTrainingTypeLabel(record.trainingType)}
                      </td>
                      <td className='px-3 py-3 whitespace-nowrap'>
                        {formatHours(record.approvedHours ?? record.submittedHours)}
                      </td>
                      <td className='px-3 py-3 whitespace-nowrap'>
                        <Badge variant='outline'>
                          {getTrainingStatusLabel(record.approvalStatus)}
                        </Badge>
                      </td>
                      <td className='px-3 py-3 whitespace-nowrap'>
                        {record.certificateCount > 0 ? (
                          <Button asChild variant='outline' size='sm'>
                            <Link href={`/dashboard/training-records/${record.id}`}>
                              มีไฟล์ {record.certificateCount}
                            </Link>
                          </Button>
                        ) : (
                          <span className='text-muted-foreground'>-</span>
                        )}
                      </td>
                    </tr>
                  ))
                ) : (
                  <tr>
                    <td colSpan={6} className='text-muted-foreground px-3 py-8 text-center'>
                      ไม่พบรายการอบรม
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
            <ScrollBar orientation='horizontal' />
          </ScrollArea>
        </CardContent>
      </Card>
    </div>
  );
}
