import { useState, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { useForm, useFieldArray, Controller } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import {
  ArrowLeft,
  Plus,
  Trash2,
  FileText,
  Package,
  Calculator,
} from 'lucide-react';
import { Button } from '@components/atoms/Button';
import { Input } from '@components/atoms/Input';
import { Label } from '@components/atoms/Label';
import { Card, CardHeader, CardTitle, CardContent, CardFooter } from '@components/molecules/Card';
import { Alert } from '@components/molecules/Alert';
import { Select, type SelectOption } from '@components/organisms/Select';
import { Breadcrumbs } from '@components/organisms/Breadcrumbs';
import { useToast } from '@components/organisms/Toast';
import { useQuotations } from '@features/sales/hooks';
import { useCustomers } from '@features/partners/hooks';
import { useCompanyStore } from '@stores/useCompanyStore';
import { formatNumber } from '@utils/formatters';

// ==================== Types ====================

interface LineItem {
  id: string;
  productId: string;
  productName: string;
  description: string;
  quantity: number;
  uomId: string;
  uomName: string;
  priceUnit: number;
  discount: number;
  taxRate: number;
}

// ==================== Validation Schema ====================

const lineItemSchema = z.object({
  id: z.string(),
  productId: z.string().min(1, 'Producto requerido'),
  productName: z.string(),
  description: z.string(),
  quantity: z.number().min(0.01, 'Cantidad debe ser mayor a 0'),
  uomId: z.string().min(1, 'Unidad requerida'),
  uomName: z.string(),
  priceUnit: z.number().min(0, 'Precio no puede ser negativo'),
  discount: z.number().min(0).max(100, 'Descuento debe estar entre 0 y 100'),
  taxRate: z.number().min(0).max(100),
});

const quotationSchema = z.object({
  partnerId: z.string().min(1, 'Cliente es requerido'),
  quotationDate: z.string().min(1, 'Fecha de cotizacion requerida'),
  validityDate: z.string().optional(),
  currencyId: z.string().min(1, 'Moneda requerida'),
  notes: z.string().optional(),
  termsConditions: z.string().optional(),
  lines: z.array(lineItemSchema).min(1, 'Debe agregar al menos un producto'),
});

type QuotationFormData = z.infer<typeof quotationSchema>;

// ==================== Helpers ====================

const generateTempId = () => `temp_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;

const formatCurrency = (value: number): string => {
  return formatNumber(value, 'es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
};

// Mock products for demo (should come from products API)
const mockProducts: SelectOption[] = [
  { value: 'prod-001', label: 'Producto A - SKU001' },
  { value: 'prod-002', label: 'Producto B - SKU002' },
  { value: 'prod-003', label: 'Producto C - SKU003' },
  { value: 'prod-004', label: 'Servicio Premium' },
  { value: 'prod-005', label: 'Licencia Software Anual' },
];

// Mock UOMs (should come from UOM API)
const mockUoms: SelectOption[] = [
  { value: 'uom-001', label: 'Unidad' },
  { value: 'uom-002', label: 'Kg' },
  { value: 'uom-003', label: 'Litro' },
  { value: 'uom-004', label: 'Hora' },
  { value: 'uom-005', label: 'Caja' },
];

// Mock currencies (should come from currency API)
const mockCurrencies: SelectOption[] = [
  { value: 'curr-001', label: 'MXN - Peso Mexicano' },
  { value: 'curr-002', label: 'USD - Dolar Estadounidense' },
  { value: 'curr-003', label: 'EUR - Euro' },
];

// Default tax rate (16% IVA for Mexico)
const DEFAULT_TAX_RATE = 16;

// ==================== Component ====================

export function QuotationCreatePage() {
  const navigate = useNavigate();
  const { showToast } = useToast();
  const { currentCompany } = useCompanyStore();
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  // API hooks
  const { createQuotation } = useQuotations({ autoFetch: false });
  const { partners: customers, isLoading: loadingCustomers } = useCustomers({ limit: 100 });

  // Calculate default validity date (30 days from now)
  const defaultValidityDate = new Date();
  defaultValidityDate.setDate(defaultValidityDate.getDate() + 30);

  // Form setup
  const {
    register,
    control,
    handleSubmit,
    watch,
    setValue,
    formState: { errors },
  } = useForm<QuotationFormData>({
    resolver: zodResolver(quotationSchema),
    defaultValues: {
      partnerId: '',
      quotationDate: new Date().toISOString().split('T')[0],
      validityDate: defaultValidityDate.toISOString().split('T')[0],
      currencyId: 'curr-001',
      notes: '',
      termsConditions: '',
      lines: [],
    },
  });

  const { fields, append, remove } = useFieldArray({
    control,
    name: 'lines',
  });

  // Watch for calculations
  const watchLines = watch('lines');

  // Calculate totals
  const calculateLineTotals = useCallback((line: LineItem) => {
    const subtotal = line.quantity * line.priceUnit;
    const discountAmt = subtotal * (line.discount / 100);
    const afterDiscount = subtotal - discountAmt;
    const taxAmt = afterDiscount * (line.taxRate / 100);
    const total = afterDiscount + taxAmt;
    return { subtotal, discountAmt, afterDiscount, taxAmt, total };
  }, []);

  const totals = watchLines.reduce(
    (acc, line) => {
      const lineTotals = calculateLineTotals(line);
      return {
        subtotal: acc.subtotal + lineTotals.subtotal,
        lineDiscount: acc.lineDiscount + lineTotals.discountAmt,
        taxAmount: acc.taxAmount + lineTotals.taxAmt,
        lineTotal: acc.lineTotal + lineTotals.total,
      };
    },
    { subtotal: 0, lineDiscount: 0, taxAmount: 0, lineTotal: 0 }
  );

  // Build customer options
  const customerOptions: SelectOption[] = customers.map((c) => ({
    value: c.id,
    label: c.name,
  }));

  // Add new line item
  const handleAddLine = () => {
    append({
      id: generateTempId(),
      productId: '',
      productName: '',
      description: '',
      quantity: 1,
      uomId: 'uom-001',
      uomName: 'Unidad',
      priceUnit: 0,
      discount: 0,
      taxRate: DEFAULT_TAX_RATE,
    });
  };

  // Handle product selection for a line
  const handleProductChange = (index: number, productId: string) => {
    const product = mockProducts.find((p) => p.value === productId);
    if (product) {
      setValue(`lines.${index}.productId`, productId);
      setValue(`lines.${index}.productName`, product.label);
      setValue(`lines.${index}.description`, product.label);
      // In real implementation, fetch product price from API
      setValue(`lines.${index}.priceUnit`, Math.random() * 1000 + 100);
    }
  };

  // Handle UOM selection for a line
  const handleUomChange = (index: number, uomId: string) => {
    const uom = mockUoms.find((u) => u.value === uomId);
    if (uom) {
      setValue(`lines.${index}.uomId`, uomId);
      setValue(`lines.${index}.uomName`, uom.label);
    }
  };

  // Submit handler
  const onSubmit = async (data: QuotationFormData) => {
    if (!currentCompany) {
      setError('No hay una empresa seleccionada');
      return;
    }

    setIsSubmitting(true);
    setError(null);

    try {
      const quotationData = {
        companyId: currentCompany.id,
        partnerId: data.partnerId,
        quotationDate: data.quotationDate,
        validityDate: data.validityDate || undefined,
        currencyId: data.currencyId,
        notes: data.notes || undefined,
        termsConditions: data.termsConditions || undefined,
      };

      const newQuotation = await createQuotation(quotationData);

      showToast({
        type: 'success',
        title: 'Cotizacion creada',
        message: `La cotizacion ${newQuotation.quotationNumber} ha sido creada exitosamente.`,
      });

      navigate(`/sales/quotations/${newQuotation.id}`);
    } catch (err) {
      const message = err instanceof Error ? err.message : 'Error al crear la cotizacion';
      setError(message);
      showToast({
        type: 'error',
        title: 'Error',
        message,
      });
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="space-y-6 p-6">
      <Breadcrumbs
        items={[
          { label: 'Ventas', href: '/sales' },
          { label: 'Cotizaciones', href: '/sales/quotations' },
          { label: 'Nueva Cotizacion' },
        ]}
      />

      <div className="flex items-center gap-4">
        <Button variant="ghost" size="sm" onClick={() => navigate('/sales/quotations')}>
          <ArrowLeft className="mr-2 h-4 w-4" />
          Volver
        </Button>
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Crear Cotizacion</h1>
          <p className="text-sm text-gray-500">
            Complete los datos para crear una nueva cotizacion de venta
          </p>
        </div>
      </div>

      <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
        {error && (
          <Alert variant="danger" title="Error" onClose={() => setError(null)}>
            {error}
          </Alert>
        )}

        {/* Section 1: Customer Information */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <FileText className="h-5 w-5" />
              Informacion del Cliente
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
              <div>
                <Label required>Cliente</Label>
                <Controller
                  name="partnerId"
                  control={control}
                  render={({ field }) => (
                    <Select
                      options={customerOptions}
                      value={field.value}
                      onChange={(val) => field.onChange(val as string)}
                      placeholder="Seleccionar cliente..."
                      searchable
                      error={!!errors.partnerId}
                      disabled={loadingCustomers}
                    />
                  )}
                />
                {errors.partnerId && (
                  <p className="mt-1 text-sm text-danger-500">{errors.partnerId.message}</p>
                )}
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Section 2: Quotation Details */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Calculator className="h-5 w-5" />
              Detalles de la Cotizacion
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
              <div>
                <Label required>Fecha de Cotizacion</Label>
                <Input
                  type="date"
                  {...register('quotationDate')}
                  error={!!errors.quotationDate}
                />
                {errors.quotationDate && (
                  <p className="mt-1 text-sm text-danger-500">{errors.quotationDate.message}</p>
                )}
              </div>
              <div>
                <Label>Vigencia Hasta</Label>
                <Input
                  type="date"
                  {...register('validityDate')}
                />
              </div>
              <div>
                <Label required>Moneda</Label>
                <Controller
                  name="currencyId"
                  control={control}
                  render={({ field }) => (
                    <Select
                      options={mockCurrencies}
                      value={field.value}
                      onChange={(val) => field.onChange(val as string)}
                      placeholder="Seleccionar moneda..."
                      error={!!errors.currencyId}
                    />
                  )}
                />
                {errors.currencyId && (
                  <p className="mt-1 text-sm text-danger-500">{errors.currencyId.message}</p>
                )}
              </div>
              <div className="md:col-span-2 lg:col-span-3">
                <Label>Notas</Label>
                <textarea
                  {...register('notes')}
                  rows={3}
                  className="block w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm placeholder:text-gray-400 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
                  placeholder="Notas adicionales para la cotizacion..."
                />
              </div>
              <div className="md:col-span-2 lg:col-span-3">
                <Label>Terminos y Condiciones</Label>
                <textarea
                  {...register('termsConditions')}
                  rows={3}
                  className="block w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm placeholder:text-gray-400 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
                  placeholder="Terminos y condiciones para el cliente..."
                />
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Section 3: Line Items */}
        <Card>
          <CardHeader>
            <div className="flex items-center justify-between">
              <CardTitle className="flex items-center gap-2">
                <Package className="h-5 w-5" />
                Lineas de la Cotizacion
              </CardTitle>
              <Button type="button" variant="outline" size="sm" onClick={handleAddLine}>
                <Plus className="mr-2 h-4 w-4" />
                Agregar Producto
              </Button>
            </div>
          </CardHeader>
          <CardContent>
            {fields.length === 0 ? (
              <div className="flex flex-col items-center justify-center py-12 text-center">
                <Package className="mb-4 h-12 w-12 text-gray-300" />
                <h3 className="text-lg font-medium text-gray-900">Sin productos</h3>
                <p className="mt-1 text-sm text-gray-500">
                  Agregue productos a la cotizacion usando el boton superior
                </p>
                <Button
                  type="button"
                  variant="primary"
                  className="mt-4"
                  onClick={handleAddLine}
                >
                  <Plus className="mr-2 h-4 w-4" />
                  Agregar primer producto
                </Button>
              </div>
            ) : (
              <div className="space-y-4">
                {/* Desktop Table Header */}
                <div className="hidden lg:grid lg:grid-cols-12 lg:gap-4 lg:border-b lg:pb-2 lg:text-sm lg:font-medium lg:text-gray-700">
                  <div className="col-span-3">Producto</div>
                  <div className="col-span-2">Descripcion</div>
                  <div className="col-span-1 text-right">Cant.</div>
                  <div className="col-span-1">Unidad</div>
                  <div className="col-span-1 text-right">Precio</div>
                  <div className="col-span-1 text-right">Dto. %</div>
                  <div className="col-span-1 text-right">IVA %</div>
                  <div className="col-span-1 text-right">Total</div>
                  <div className="col-span-1"></div>
                </div>

                {/* Line Items */}
                {fields.map((field, index) => {
                  const line = watchLines[index];
                  const lineTotals = line ? calculateLineTotals(line) : { total: 0 };

                  return (
                    <div
                      key={field.id}
                      className="grid grid-cols-1 gap-4 rounded-lg border bg-gray-50 p-4 lg:grid-cols-12 lg:items-center lg:bg-transparent lg:p-0 lg:border-0"
                    >
                      {/* Product */}
                      <div className="lg:col-span-3">
                        <Label className="lg:hidden">Producto</Label>
                        <Controller
                          name={`lines.${index}.productId`}
                          control={control}
                          render={({ field: selectField }) => (
                            <Select
                              options={mockProducts}
                              value={selectField.value}
                              onChange={(val) => handleProductChange(index, val as string)}
                              placeholder="Buscar producto..."
                              searchable
                              error={!!errors.lines?.[index]?.productId}
                            />
                          )}
                        />
                        {errors.lines?.[index]?.productId && (
                          <p className="mt-1 text-xs text-danger-500">
                            {errors.lines[index]?.productId?.message}
                          </p>
                        )}
                      </div>

                      {/* Description */}
                      <div className="lg:col-span-2">
                        <Label className="lg:hidden">Descripcion</Label>
                        <Input
                          {...register(`lines.${index}.description`)}
                          placeholder="Descripcion"
                          inputSize="sm"
                        />
                      </div>

                      {/* Quantity */}
                      <div className="lg:col-span-1">
                        <Label className="lg:hidden">Cantidad</Label>
                        <Input
                          type="number"
                          step="0.01"
                          min="0.01"
                          {...register(`lines.${index}.quantity`, { valueAsNumber: true })}
                          className="text-right"
                          inputSize="sm"
                          error={!!errors.lines?.[index]?.quantity}
                        />
                      </div>

                      {/* UOM */}
                      <div className="lg:col-span-1">
                        <Label className="lg:hidden">Unidad</Label>
                        <Controller
                          name={`lines.${index}.uomId`}
                          control={control}
                          render={({ field: selectField }) => (
                            <Select
                              options={mockUoms}
                              value={selectField.value}
                              onChange={(val) => handleUomChange(index, val as string)}
                              placeholder="UOM"
                            />
                          )}
                        />
                      </div>

                      {/* Unit Price */}
                      <div className="lg:col-span-1">
                        <Label className="lg:hidden">Precio Unitario</Label>
                        <Input
                          type="number"
                          step="0.01"
                          min="0"
                          {...register(`lines.${index}.priceUnit`, { valueAsNumber: true })}
                          className="text-right"
                          inputSize="sm"
                          error={!!errors.lines?.[index]?.priceUnit}
                        />
                      </div>

                      {/* Discount */}
                      <div className="lg:col-span-1">
                        <Label className="lg:hidden">Descuento %</Label>
                        <Input
                          type="number"
                          step="0.01"
                          min="0"
                          max="100"
                          {...register(`lines.${index}.discount`, { valueAsNumber: true })}
                          className="text-right"
                          inputSize="sm"
                        />
                      </div>

                      {/* Tax Rate */}
                      <div className="lg:col-span-1">
                        <Label className="lg:hidden">IVA %</Label>
                        <Input
                          type="number"
                          step="0.01"
                          min="0"
                          max="100"
                          {...register(`lines.${index}.taxRate`, { valueAsNumber: true })}
                          className="text-right"
                          inputSize="sm"
                        />
                      </div>

                      {/* Line Total */}
                      <div className="lg:col-span-1 lg:text-right">
                        <Label className="lg:hidden">Total Linea</Label>
                        <div className="text-sm font-medium text-gray-900">
                          ${formatCurrency(lineTotals.total)}
                        </div>
                      </div>

                      {/* Remove Button */}
                      <div className="lg:col-span-1 lg:text-right">
                        <Button
                          type="button"
                          variant="ghost"
                          size="sm"
                          onClick={() => remove(index)}
                          className="text-danger-600 hover:bg-danger-50 hover:text-danger-700"
                        >
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>
                  );
                })}

                {errors.lines?.root && (
                  <p className="text-sm text-danger-500">{errors.lines.root.message}</p>
                )}
                {errors.lines?.message && (
                  <p className="text-sm text-danger-500">{errors.lines.message}</p>
                )}
              </div>
            )}
          </CardContent>
        </Card>

        {/* Section 4: Summary */}
        <Card>
          <CardHeader>
            <CardTitle>Resumen de la Cotizacion</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex flex-col items-end space-y-3">
              <div className="grid w-full max-w-md grid-cols-2 gap-4 text-sm">
                <div className="text-gray-600">Subtotal:</div>
                <div className="text-right font-medium">${formatCurrency(totals.subtotal)}</div>

                <div className="text-gray-600">Descuento en lineas:</div>
                <div className="text-right font-medium text-danger-600">
                  -${formatCurrency(totals.lineDiscount)}
                </div>

                <div className="text-gray-600">IVA:</div>
                <div className="text-right font-medium">${formatCurrency(totals.taxAmount)}</div>

                <div className="border-t-2 pt-3 text-lg font-bold text-gray-900">TOTAL:</div>
                <div className="border-t-2 pt-3 text-right text-lg font-bold text-primary-600">
                  ${formatCurrency(totals.lineTotal)}
                </div>
              </div>
            </div>
          </CardContent>
          <CardFooter className="flex justify-end gap-3">
            <Button
              type="button"
              variant="outline"
              onClick={() => navigate('/sales/quotations')}
              disabled={isSubmitting}
            >
              Cancelar
            </Button>
            <Button type="submit" isLoading={isSubmitting}>
              Crear Cotizacion
            </Button>
          </CardFooter>
        </Card>
      </form>
    </div>
  );
}

export default QuotationCreatePage;