'use client';

import Link from 'next/link';
import { useMemo, useState } from 'react';
import { useMutation } from '@tanstack/react-query';
import { toast } from 'sonner';
import { Icons } from '@/components/icons';
import { Badge } from '@/components/ui/badge';
import { Button, buttonVariants } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { cn } from '@/lib/utils';
import { importTrainingRecordsMutation } from '../api/mutations';
import type { TrainingRecordImportResponse } from '../api/types';
import { trainingRecordImportTemplateHeaders } from '../constants/import-training-records';

function downloadErrorSummary(result: TrainingRecordImportResponse) {
  if (!result.errors.length) {
    toast.error('ไม่มีรายการผิดพลาดสำหรับดาวน์โหลด');
    return;
  }

  const rows = [
    ['row', 'employee_code', 'message'],
    ...result.errors.map((error) => [
      String(error.row),
      error.employee_code ?? '',
      error.message.replaceAll('\n', ' ')
    ])
  ];

  const csv = rows
    .map((row) => row.map((cell) => `"${cell.replaceAll('"', '""')}"`).join(','))
    .join('\n');

  const blob = new Blob([`\uFEFF${csv}`], { type: 'text/csv;charset=utf-8;' });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = 'training-record-import-errors.csv';
  link.click();
  URL.revokeObjectURL(url);
}

export function TrainingRecordImportPage() {
  const [file, setFile] = useState<File | null>(null);
  const [result, setResult] = useState<TrainingRecordImportResponse | null>(null);

  const mutation = useMutation({
    ...importTrainingRecordsMutation,
    onSuccess: (response) => {
      setResult(response);
      toast.success(response.message);
    },
    onError: (error) => {
      toast.error(error.message || 'ไม่สามารถนำเข้าประวัติการอบรมได้');
    }
  });

  const fileLabel = useMemo(() => {
    if (!file) return 'ยังไม่ได้เลือกไฟล์';
    return `${file.name} (${Math.ceil(file.size / 1024)} KB)`;
  }, [file]);

  return (
    <div className='space-y-6'>
      <div className='grid gap-4 lg:grid-cols-[1.1fr_0.9fr]'>
        <Card>
          <CardHeader>
            <CardTitle>นำเข้าประวัติการอบรม</CardTitle>
            <CardDescription>
              อัปโหลดไฟล์ Excel `.xlsx` เพื่อสร้างประวัติการอบรมหลายรายการให้พนักงานโดยตรง
            </CardDescription>
          </CardHeader>
          <CardContent className='space-y-4'>
            <div className='space-y-2'>
              <div className='text-sm font-medium'>ไฟล์นำเข้า</div>
              <Input
                type='file'
                accept='.xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                onChange={(event) => setFile(event.target.files?.[0] ?? null)}
                disabled={mutation.isPending}
              />
              <p className='text-muted-foreground text-sm'>{fileLabel}</p>
            </div>

            <div className='flex flex-wrap gap-2'>
              <Link
                href='/api/training-records/import/template'
                className={cn(buttonVariants({ variant: 'outline' }), 'text-sm')}
              >
                <Icons.fileTypeXls className='mr-2 h-4 w-4' />
                ดาวน์โหลด Template Excel
              </Link>
              <Button
                onClick={() => {
                  if (!file) {
                    toast.error('กรุณาเลือกไฟล์ .xlsx ก่อนนำเข้า');
                    return;
                  }

                  mutation.mutate(file);
                }}
                isLoading={mutation.isPending}
              >
                <Icons.upload className='mr-2 h-4 w-4' />
                นำเข้าประวัติการอบรม
              </Button>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Field ใน Template</CardTitle>
            <CardDescription>
              ใช้หัวตารางตามนี้ให้ตรงทุกคอลัมน์ก่อนนำเข้า
            </CardDescription>
          </CardHeader>
          <CardContent className='space-y-3 text-sm'>
            <p className='text-muted-foreground'>
              ระบบจะสร้างเฉพาะแถวที่ผ่าน validation และบันทึกสถานะเป็น Approved ทันที
            </p>
            <div className='space-y-2'>
              {trainingRecordImportTemplateHeaders.map((header) => (
                <div key={header} className='bg-muted/40 rounded-md border px-3 py-2 font-mono text-sm'>
                  {header}
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>

      {result ? (
        <Card>
          <CardHeader>
            <CardTitle>สรุปผลการนำเข้า</CardTitle>
            <CardDescription>{result.message}</CardDescription>
          </CardHeader>
          <CardContent className='space-y-6'>
            <div className='grid gap-4 md:grid-cols-3'>
              <SummaryCard label='จำนวนแถวทั้งหมด' value={result.summary.total_rows} />
              <SummaryCard label='นำเข้าสำเร็จ' value={result.summary.imported_records} />
              <SummaryCard label='ผิดพลาด' value={result.summary.failed_rows} />
            </div>

            <div className='rounded-lg border p-4'>
              <div className='mb-2 text-sm font-medium'>สถานะการนำเข้า</div>
              <div className='flex flex-wrap items-center gap-2'>
                <Badge variant={result.errors.length === 0 ? 'default' : 'secondary'}>
                  {result.errors.length === 0 ? 'สำเร็จทั้งหมด' : 'สำเร็จบางส่วน'}
                </Badge>
                {result.errors.length > 0 ? (
                  <Button variant='outline' size='sm' onClick={() => downloadErrorSummary(result)}>
                    <Icons.fileTypeXls className='mr-2 h-4 w-4' />
                    ดาวน์โหลดรายการผิดพลาด
                  </Button>
                ) : null}
              </div>
            </div>

            <div className='space-y-3'>
              <div className='text-sm font-medium'>แถวที่ผิดพลาด</div>
              {result.errors.length === 0 ? (
                <div className='text-muted-foreground rounded-lg border border-dashed px-4 py-8 text-center text-sm'>
                  ไม่พบข้อผิดพลาดจากการนำเข้าครั้งนี้
                </div>
              ) : (
                <div className='space-y-2'>
                  {result.errors.map((error) => (
                    <div
                      key={`${error.row}-${error.employee_code ?? 'unknown'}`}
                      className='rounded-lg border px-4 py-3 text-sm'
                    >
                      <div className='font-medium'>
                        แถวที่ {error.row}
                        {error.employee_code ? ` | ${error.employee_code}` : ''}
                      </div>
                      <div className='text-muted-foreground mt-1'>{error.message}</div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </CardContent>
        </Card>
      ) : (
        <Card className='border-dashed'>
          <CardContent className='flex flex-col items-center justify-center gap-4 py-12 text-center'>
            <div className='bg-muted flex h-12 w-12 items-center justify-center rounded-full'>
              <Icons.upload className='text-muted-foreground h-6 w-6' />
            </div>
            <div className='space-y-1'>
              <h3 className='text-lg font-semibold'>ยังไม่มีผลการนำเข้า</h3>
              <p className='text-muted-foreground max-w-md text-sm'>
                ดาวน์โหลด template แล้วอัปโหลดไฟล์ Excel เพื่อเริ่มนำเข้าประวัติการอบรมหลายรายการ
              </p>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  );
}

function SummaryCard({ label, value }: { label: string; value: number }) {
  return (
    <div className='rounded-lg border p-4'>
      <div className='text-muted-foreground text-sm'>{label}</div>
      <div className='mt-1 text-2xl font-semibold'>{value}</div>
    </div>
  );
}
