'use client';

import { useMutation, useSuspenseQuery } from '@tanstack/react-query';
import { toast } from 'sonner';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { masterReviewQueryOptions } from '../api/queries';
import { reviewMasterItemMutation } from '../api/mutations';
import type { MasterReviewItem } from '../api/types';

export function MasterReviewPage() {
  const { data } = useSuspenseQuery(masterReviewQueryOptions());
  const reviewMutation = useMutation({
    ...reviewMasterItemMutation,
    onSuccess: (response) => {
      toast.success(response.message);
    },
    onError: (error) => {
      toast.error(error.message || 'ไม่สามารถอัปเดตรายการรอตรวจสอบได้');
    }
  });

  const totalPending = data.companies.length + data.departments.length + data.positions.length;

  return (
    <div className='space-y-6'>
      <div className='grid gap-4 md:grid-cols-2 xl:grid-cols-4'>
        <SummaryCard label='รายการรอตรวจสอบทั้งหมด' value={totalPending} />
        <SummaryCard label='บริษัท' value={data.companies.length} />
        <SummaryCard label='แผนก' value={data.departments.length} />
        <SummaryCard label='ตำแหน่ง' value={data.positions.length} />
      </div>

      <ReviewSection
        title='บริษัท'
        description='ชื่อบริษัทใหม่จากไฟล์นำเข้าที่รอการยืนยัน'
        items={data.companies}
        isPending={reviewMutation.isPending}
        onAction={(item, action) => reviewMutation.mutate({ entityType: item.type, id: item.id, action })}
      />

      <ReviewSection
        title='แผนก'
        description='แผนกใหม่ที่ยังไม่ถูกเปิดใช้งานในข้อมูลหลัก'
        items={data.departments}
        isPending={reviewMutation.isPending}
        onAction={(item, action) => reviewMutation.mutate({ entityType: item.type, id: item.id, action })}
      />

      <ReviewSection
        title='ตำแหน่ง'
        description='ตำแหน่งงานใหม่ที่รอการอนุมัติจาก HRD'
        items={data.positions}
        isPending={reviewMutation.isPending}
        onAction={(item, action) => reviewMutation.mutate({ entityType: item.type, id: item.id, action })}
      />
    </div>
  );
}

function SummaryCard({ label, value }: { label: string; value: number }) {
  return (
    <Card>
      <CardHeader className='pb-2'>
        <CardDescription>{label}</CardDescription>
        <CardTitle className='text-2xl'>{value}</CardTitle>
      </CardHeader>
    </Card>
  );
}

function ReviewSection({
  title,
  description,
  items,
  isPending,
  onAction
}: {
  title: string;
  description: string;
  items: MasterReviewItem[];
  isPending: boolean;
  onAction: (item: MasterReviewItem, action: 'approve' | 'reject') => void;
}) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>{title}</CardTitle>
        <CardDescription>{description}</CardDescription>
      </CardHeader>
      <CardContent>
        {items.length === 0 ? (
          <div className='text-muted-foreground rounded-lg border border-dashed px-4 py-10 text-center text-sm'>
            ไม่มีรายการ{title}ที่รอตรวจสอบ
          </div>
        ) : (
          <div className='space-y-3'>
            {items.map((item) => (
              <div
                key={`${item.type}-${item.id}`}
                className='flex flex-col gap-3 rounded-lg border p-4 md:flex-row md:items-center md:justify-between'
              >
                <div className='space-y-1'>
                  <div className='flex items-center gap-2'>
                    <div className='font-medium'>{item.name}</div>
                    <Badge variant='outline'>รอตรวจสอบ</Badge>
                  </div>
                  <div className='text-muted-foreground text-sm'>
                    ได้รับผลกระทบ {item.affected_count} รายการ
                  </div>
                </div>
                <div className='flex gap-2'>
                  <Button
                    variant='outline'
                    disabled={isPending}
                    onClick={() => onAction(item, 'reject')}
                  >
                    ไม่อนุมัติ
                  </Button>
                  <Button disabled={isPending} onClick={() => onAction(item, 'approve')}>
                    อนุมัติ
                  </Button>
                </div>
              </div>
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  );
}
