'use client';

import { useEffect, useMemo, useState } from 'react';
import type { ExpenseObligation, ExpenseDocument, RecurringExpenseTemplate } from '@/lib/types';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Badge } from '@/components/ui/badge';
import { useToast } from '@/hooks/use-toast';

type Props = {
  document: ExpenseDocument;
  templates: RecurringExpenseTemplate[];
};

type ExpenseBasis = 'cash' | 'accrual' | 'prepaid';
type ObligationStatus = 'pending' | 'recognized' | 'settled' | 'partially_settled' | 'reversed';

const BASIS_LABELS: Record<string, string> = {
  cash: 'أساس نقدي',
  accrual: 'أساس الاستحقاق',
  prepaid: 'مصروف مقدم',
};

const STATUS_LABELS: Record<string, string> = {
  pending: 'قيد الانتظار',
  recognized: 'معترف به',
  settled: 'مسدد',
  partially_settled: 'مسدد جزئياً',
  reversed: 'معكوس',
};

function getBasisBadgeVariant(basis: string): 'default' | 'secondary' | 'destructive' | 'outline' {
  if (basis === 'accrual') return 'default';
  if (basis === 'prepaid') return 'secondary';
  return 'outline';
}

function getStatusBadgeVariant(status: string): 'default' | 'secondary' | 'destructive' | 'outline' {
  if (status === 'recognized' || status === 'settled') return 'default';
  if (status === 'pending' || status === 'partially_settled') return 'secondary';
  if (status === 'reversed') return 'destructive';
  return 'outline';
}

export function ExpenseObligationManager({ document, templates }: Props) {
  const { toast } = useToast();

  const [obligations, setObligations] = useState<ExpenseObligation[]>([]);
  const [loadingObligations, setLoadingObligations] = useState(false);
  const [selectedObligationId, setSelectedObligationId] = useState('');

  // Form state for creating obligation
  const [basis, setBasis] = useState<ExpenseBasis>('cash');
  const [periodStart, setPeriodStart] = useState('');
  const [periodEnd, setPeriodEnd] = useState('');
  const [grossAmount, setGrossAmount] = useState('');
  const [recognitionDate, setRecognitionDate] = useState('');

  const selectedObligation = useMemo(() => {
    return obligations.find((o) => o.id === selectedObligationId);
  }, [obligations, selectedObligationId]);

  const fetchObligations = async () => {
    setLoadingObligations(true);
    try {
      const response = await fetch(
        `/api/admin/expense-recurring/documents/${encodeURIComponent(document.id)}/obligations`
      );
      if (!response.ok) throw new Error('تعذر جلب الالتزامات');
      const data = await response.json();
      const items = Array.isArray(data?.items) ? data.items : [];
      setObligations(items as ExpenseObligation[]);

      if (items.length > 0 && !selectedObligationId) {
        setSelectedObligationId(items[0].id);
      }
    } catch (error) {
      toast({
        title: 'خطأ',
        description: error instanceof Error ? error.message : 'فشل في جلب الالتزامات',
        variant: 'destructive',
      });
    } finally {
      setLoadingObligations(false);
    }
  };

  const handleCreateObligation = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!periodStart || !periodEnd || !grossAmount) {
      toast({
        title: 'خطأ التحقق',
        description: 'يرجى ملء الحقول المطلوبة',
        variant: 'destructive',
      });
      return;
    }

    try {
      const response = await fetch(
        `/api/admin/expense-recurring/documents/${encodeURIComponent(document.id)}/obligations`,
        {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            periodStart,
            periodEnd,
            grossAmount: Number(grossAmount),
            basis,
            recognitionDate: recognitionDate || undefined,
          }),
        }
      );

      if (!response.ok) throw new Error('فشل في إنشاء الالتزام');

      toast({
        title: 'نجح',
        description: 'تم إنشاء الالتزام المالي بنجاح',
      });

      // Reset form
      setPeriodStart('');
      setPeriodEnd('');
      setGrossAmount('');
      setBasis('cash');
      setRecognitionDate('');

      // Refresh list
      await fetchObligations();
    } catch (error) {
      toast({
        title: 'خطأ',
        description: error instanceof Error ? error.message : 'فشل في إنشاء الالتزام',
        variant: 'destructive',
      });
    }
  };

  useEffect(() => {
    fetchObligations();
  }, [document.id]);

  return (
    <div className="space-y-6">
      {/* Create Obligation Card */}
      <Card>
        <CardHeader>
          <CardTitle>إنشاء التزام مالي</CardTitle>
          <CardDescription>
            تحديد أساس المحاسبة (نقدي/استحقاق/مقدم) والفترة المالية للمستند
          </CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleCreateObligation} className="space-y-6">
            {/* Row 1: Basis and Dates */}
            <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
              <div className="space-y-1">
                <Label>أساس المحاسبة *</Label>
                <Select value={basis} onValueChange={(v) => setBasis(v as ExpenseBasis)}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="cash">أساس نقدي (الدفع فقط)</SelectItem>
                    <SelectItem value="accrual">أساس الاستحقاق (الالتزام)</SelectItem>
                    <SelectItem value="prepaid">مصروف مقدم (توزيع)</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-1">
                <Label>بداية الفترة *</Label>
                <Input
                  type="date"
                  value={periodStart}
                  onChange={(e) => setPeriodStart(e.target.value)}
                  lang="en"
                  dir="ltr"
                />
              </div>
              <div className="space-y-1">
                <Label>نهاية الفترة *</Label>
                <Input
                  type="date"
                  value={periodEnd}
                  onChange={(e) => setPeriodEnd(e.target.value)}
                  lang="en"
                  dir="ltr"
                />
              </div>
              <div className="space-y-1">
                <Label>المبلغ الإجمالي *</Label>
                <Input
                  type="number"
                  step="0.01"
                  inputMode="decimal"
                  placeholder="0.00"
                  value={grossAmount}
                  onChange={(e) => setGrossAmount(e.target.value)}
                  lang="en"
                  dir="ltr"
                />
              </div>
            </div>

            {/* Row 2: Recognition Date (for accrual) */}
            {basis !== 'cash' && (
              <div className="space-y-1">
                <Label>تاريخ الاعتراف (اختياري)</Label>
                <Input
                  type="date"
                  value={recognitionDate}
                  onChange={(e) => setRecognitionDate(e.target.value)}
                  lang="en"
                  dir="ltr"
                />
              </div>
            )}

            {/* Basis explanation */}
            <div className="p-3 bg-muted rounded-md text-sm">
              {basis === 'cash' && (
                <p className="text-muted-foreground">
                  <strong>أساس نقدي:</strong> يتم تسجيل المصروف فقط عند الدفع الفعلي.
                </p>
              )}
              {basis === 'accrual' && (
                <p className="text-muted-foreground">
                  <strong>أساس الاستحقاق:</strong> يتم تسجيل المصروف عند الالتزام به، حتى لو لم يتم الدفع بعد. سيتم إنشاء
                  قيد مدين/دائن تلقائياً.
                </p>
              )}
              {basis === 'prepaid' && (
                <p className="text-muted-foreground">
                  <strong>مصروف مقدم:</strong> الدفع يتم مقدماً، سيتم توزيع المبلغ على الفترات لاحقاً (مثل إيجار سنوي
                  مدفوع مقدماً).
                </p>
              )}
            </div>

            {/* Submit Button */}
            <Button type="submit" className="w-full">
              إنشاء الالتزام
            </Button>
          </form>
        </CardContent>
      </Card>

      {/* Obligations List */}
      <Card>
        <CardHeader>
          <CardTitle>الالتزامات المالية</CardTitle>
          <CardDescription>قائمة الالتزامات المحاسبية المرتبطة بهذا المستند</CardDescription>
        </CardHeader>
        <CardContent>
          {loadingObligations ? (
            <div className="text-center text-muted-foreground py-8">جاري التحميل...</div>
          ) : obligations.length === 0 ? (
            <div className="text-center text-muted-foreground py-8">لا توجد التزامات</div>
          ) : (
            <div className="overflow-auto">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>الفترة</TableHead>
                    <TableHead>المبلغ</TableHead>
                    <TableHead>الأساس</TableHead>
                    <TableHead>الحالة</TableHead>
                    <TableHead>الاعتراف</TableHead>
                    <TableHead>الإجراءات</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {obligations.map((obligation) => (
                    <TableRow
                      key={obligation.id}
                      className={selectedObligationId === obligation.id ? 'bg-muted/60' : ''}
                      onClick={() => setSelectedObligationId(obligation.id)}
                    >
                      <TableCell>
                        {formatDateDDMMYYYY(obligation.periodStart)} -{' '}
                        {formatDateDDMMYYYY(obligation.periodEnd)}
                      </TableCell>
                      <TableCell>{Number(obligation.grossAmount).toLocaleString(undefined, { minimumFractionDigits: 2 })}</TableCell>
                      <TableCell>
                        <Badge variant={getBasisBadgeVariant(obligation.basis)}>
                          {BASIS_LABELS[obligation.basis] || obligation.basis}
                        </Badge>
                      </TableCell>
                      <TableCell>
                        <Badge variant={getStatusBadgeVariant(obligation.status)}>
                          {STATUS_LABELS[obligation.status] || obligation.status}
                        </Badge>
                      </TableCell>
                      <TableCell>
                        {obligation.recognitionDate
                          ? formatDateDDMMYYYY(obligation.recognitionDate)
                          : '-'}
                      </TableCell>
                      <TableCell>
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={(e) => {
                            e.stopPropagation();
                            setSelectedObligationId(obligation.id);
                          }}
                        >
                          تفاصيل
                        </Button>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          )}
        </CardContent>
      </Card>

      {/* Selected Obligation Details */}
      {selectedObligation && (
        <Card>
          <CardHeader>
            <CardTitle>تفاصيل الالتزام</CardTitle>
            <CardDescription>الالتزام رقم: {selectedObligation.id}</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div className="space-y-4">
                <div>
                  <Label className="text-muted-foreground">الفترة</Label>
                  <p>
                    {formatDateDDMMYYYY(selectedObligation.periodStart)} -{' '}
                    {formatDateDDMMYYYY(selectedObligation.periodEnd)}
                  </p>
                </div>
                <div>
                  <Label className="text-muted-foreground">المبلغ الإجمالي</Label>
                  <p className="text-lg font-semibold">
                    {Number(selectedObligation.grossAmount).toLocaleString(undefined, { minimumFractionDigits: 2 })}
                  </p>
                </div>
                <div>
                  <Label className="text-muted-foreground">أساس المحاسبة</Label>
                  <p>
                    <Badge variant={getBasisBadgeVariant(selectedObligation.basis)}>
                      {BASIS_LABELS[selectedObligation.basis] || selectedObligation.basis}
                    </Badge>
                  </p>
                </div>
              </div>
              <div className="space-y-4">
                <div>
                  <Label className="text-muted-foreground">الحالة</Label>
                  <p>
                    <Badge variant={getStatusBadgeVariant(selectedObligation.status)}>
                      {STATUS_LABELS[selectedObligation.status] || selectedObligation.status}
                    </Badge>
                  </p>
                </div>
                <div>
                  <Label className="text-muted-foreground">تاريخ الاعتراف</Label>
                  <p>{selectedObligation.recognitionDate ? formatDateDDMMYYYY(selectedObligation.recognitionDate) : 'غير محدد'}</p>
                </div>
                <div>
                  <Label className="text-muted-foreground">تاريخ التسوية</Label>
                  <p>{selectedObligation.settlementDate ? formatDateDDMMYYYY(selectedObligation.settlementDate) : 'لم يتم التسوية بعد'}</p>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  );
}