'use client';

import Link from 'next/link';
import { Loader2 } from 'lucide-react';

import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';

export type MissingCostItem = {
  materialId: string;
  materialName: string;
};

export type ShortageBreakdownRow = {
  materialId: string;
  materialName: string;
  shortageQty: number;
  unitCost: number;
  totalCost: number;
};

export type ResolutionType = 'supplier' | 'employee' | 'wastage' | 'resend';

type Props = {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  transferNumber?: string;
  rows: ShortageBreakdownRow[];
  total: number;
  hasZeroCostRows: boolean;
  resolutionType: ResolutionType;
  onResolutionTypeChange: (value: ResolutionType) => void;
  resolutionNote: string;
  onResolutionNoteChange: (value: string) => void;
  missingCostItems: MissingCostItem[];
  isPending: boolean;
  onCancel: () => void;
  onSave: () => void;
};

export default function TransferShortageResolutionDialog({
  open,
  onOpenChange,
  transferNumber,
  rows,
  total,
  hasZeroCostRows,
  resolutionType,
  onResolutionTypeChange,
  resolutionNote,
  onResolutionNoteChange,
  missingCostItems,
  isPending,
  onCancel,
  onSave,
}: Props) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-4xl max-h-[85vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>معالجة نقص الارسالية</DialogTitle>
          <DialogDescription>
            اختر سبب النقص ليتم إنشاء القيد المناسب أو إعادة الإرسال.
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-3">
          <div className="rounded-md border p-3 text-sm">
            <div className="flex justify-between">
              <span className="text-muted-foreground">الارسالية</span>
              <span className="font-mono">{transferNumber || '-'}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-muted-foreground">مجمل تكلفة الاصناف المختلف عليها</span>
              <span className="font-mono text-amber-700">
                {total.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
              </span>
            </div>
          </div>

          <div className="rounded-md border">
            <div className="border-b bg-muted/40 px-3 py-2 text-sm font-medium">تفصيل الاصناف المختلف عليها</div>
            <div className="overflow-x-auto">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className="text-right">الصنف</TableHead>
                    <TableHead className="text-right">الكمية المختلف عليها</TableHead>
                    <TableHead className="text-right">تكلفة الوحدة</TableHead>
                    <TableHead className="text-right">اجمالي تكلفة الصنف</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {rows.length === 0 ? (
                    <TableRow>
                      <TableCell colSpan={4} className="text-center text-sm text-muted-foreground">
                        لا توجد كميات مختلفة حاليا.
                      </TableCell>
                    </TableRow>
                  ) : (
                    rows.map((row) => (
                      <TableRow key={`${row.materialId}-${row.materialName}`} className={row.unitCost <= 0 ? 'bg-amber-50/70' : undefined}>
                        <TableCell className="text-xs whitespace-normal break-words">
                          <div className="flex flex-col gap-1">
                            <span>{row.materialName}</span>
                            {row.unitCost <= 0 && <span className="text-[11px] font-medium text-amber-700">بدون تكلفة - يحتاج ضبط سعر شراء</span>}
                          </div>
                        </TableCell>
                        <TableCell className="font-mono text-xs">{row.shortageQty.toLocaleString('en-US', { maximumFractionDigits: 3 })}</TableCell>
                        <TableCell className={`font-mono text-xs ${row.unitCost <= 0 ? 'text-amber-700 font-semibold' : ''}`}>
                          {row.unitCost.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
                        </TableCell>
                        <TableCell className={`font-mono text-xs ${row.unitCost <= 0 ? 'text-amber-700 font-semibold' : 'text-amber-700'}`}>
                          {row.totalCost.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
                        </TableCell>
                      </TableRow>
                    ))
                  )}
                </TableBody>
              </Table>
            </div>
            {hasZeroCostRows && (
              <div className="border-t bg-amber-50 px-3 py-2 text-xs text-amber-800">
                الصفوف المظللة تعني أن تكلفة الصنف غير معرفة حاليا، يرجى ضبط سعر الشراء قبل حفظ المعالجة المحاسبية.
              </div>
            )}
            <div className="flex items-center justify-between border-t bg-muted/30 px-3 py-2 text-sm">
              <span className="font-medium">المجموع</span>
              <span className="font-mono font-semibold">
                {total.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
              </span>
            </div>
          </div>

          <div className="space-y-2">
            <span className="text-sm font-medium">سبب النقص</span>
            <Select value={resolutionType} onValueChange={(value) => onResolutionTypeChange(value as ResolutionType)}>
              <SelectTrigger>
                <SelectValue placeholder="اختر السبب" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="supplier">خطأ مورد (إشعار دائن للمورد)</SelectItem>
                <SelectItem value="employee">خطأ موظف (عهدة الموظف)</SelectItem>
                <SelectItem value="wastage">هالك طبيعي (مصروف فروقات مخزون)</SelectItem>
                <SelectItem value="resend">إعادة الإرسالية للموظف للاستلام</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div className="space-y-2">
            <span className="text-sm font-medium">ملاحظات</span>
            <Input
              placeholder="سبب أو تفاصيل إضافية"
              value={resolutionNote}
              onChange={(event) => onResolutionNoteChange(event.target.value)}
            />
          </div>

          {missingCostItems.length > 0 && (
            <div className="space-y-2 rounded-md border border-amber-300 bg-amber-50 p-3 text-sm">
              <div className="font-medium text-amber-800">اصناف بدون سعر شراء</div>
              <div className="text-amber-700">قم بضبط سعر الشراء ثم أعد حفظ الإجراء.</div>
              <div className="flex flex-wrap gap-2">
                {missingCostItems.map((item) => (
                  <Button key={item.materialId} asChild size="sm" variant="outline" className="h-8">
                    <Link href={`/admin/data/materials/${encodeURIComponent(item.materialId)}/edit`}>
                      {item.materialName}
                    </Link>
                  </Button>
                ))}
                <Button asChild size="sm" variant="outline" className="h-8">
                  <Link href="/admin/data/materials">فتح صفحة الاصناف</Link>
                </Button>
              </div>
            </div>
          )}
        </div>

        <DialogFooter>
          <Button type="button" variant="outline" onClick={onCancel} disabled={isPending}>
            إلغاء
          </Button>
          <Button type="button" onClick={onSave} disabled={isPending}>
            {isPending && <Loader2 className="me-2 h-4 w-4 animate-spin" />}
            حفظ الإجراء
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}