'use client';

import React, { useState, useMemo } from 'react';
import { FileText, Upload } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Modal } from '@/components/ui/modal';
import { useCreatePurchaseOrder } from '@/services/purchase-orders/queries';
import { PurchaseOrderType } from '@/services/purchase-orders/types';
import { DsoWorkspaceMode } from '@/services/coupons/types';
import { useAllDistricts } from '@/services/districts/queries';
import { useAllDistrictSectors } from '@/services/sectors/queries';
import { useListAllDistrictSector } from '@/services/district-sector-assignments/queries';
import { useCouponGroups } from '@/services/coupon-groups/queries';
import { useSelector } from 'react-redux';
import { RootState } from '@/store';

interface Props {
  poType: PurchaseOrderType;
  poTypeLabel: string;
  workspaceMode?: DsoWorkspaceMode;
  onClose: () => void;
}

export default function CreatePurchaseOrderModal({ poType: initialPoType, poTypeLabel, workspaceMode, onClose }: Props) {
  const currentUser = useSelector((state: RootState) => state.auth.user);
  const currentUserId = currentUser?.id;

  const [couponGroupId, setCouponGroupId] = useState('');
  const [quantityAsked, setQuantityAsked] = useState('10');
  const [neftTransactionNo, setNeftTransactionNo] = useState('');
  const [message, setMessage] = useState('');
  const [file, setFile] = useState<File | null>(null);
  const [error, setError] = useState<string | null>(null);

  const [useCustomTarget, setUseCustomTarget] = useState(false);
  const [selectedDistrictId, setSelectedDistrictId] = useState('');
  const [selectedSectorId, setSelectedSectorId] = useState('');
  const [selectedTargetDsoOwnerId, setSelectedTargetDsoOwnerId] = useState('');

  const { data: couponGroupsData } = useCouponGroups();
  const couponGroups = useMemo(() => (couponGroupsData as any)?.items || couponGroupsData || [], [couponGroupsData]);

  const selectedGroup = useMemo(
    () => couponGroups.find((g: any) => g.id === couponGroupId),
    [couponGroups, couponGroupId]
  );

  const isKitGroup = selectedGroup?.type === 'KIT';

  // ✅ Fallback to 'INSTITUTE' if workspaceMode is not explicitly 'DSO' or 'RESELLER'
  const isInstitutePersona = !workspaceMode || workspaceMode === 'INSTITUTE';

  // ✅ ROUTING FIX:
  // - Non-Institute modes (DSO / RESELLER) -> DSO_TO_ADMIN
  // - Institute Mode + KIT Group -> INSTITUTE_TO_ADMIN
  // - Institute Mode + Normal/Category Group -> INSTITUTE_TO_DSO (Target DSO Enabled)
  const effectivePoType = useMemo(() => {
    if (!isInstitutePersona) {
      return PurchaseOrderType.DSO_TO_ADMIN;
    }
    if (isKitGroup) {
      return PurchaseOrderType.INSTITUTE_TO_ADMIN;
    }
    return PurchaseOrderType.INSTITUTE_TO_DSO;
  }, [isInstitutePersona, isKitGroup]);

  const { data: districtsData } = useAllDistricts();
  const districts = useMemo(() => (districtsData as any)?.items || districtsData || [], [districtsData]);

  const { data: sectorsData } = useAllDistrictSectors(selectedDistrictId, 'all');
  const sectors = useMemo(() => (sectorsData as any)?.items || sectorsData || [], [sectorsData]);

  const { data: dsoOwnersData } = useListAllDistrictSector(selectedDistrictId, true);
  const dsoOwners = useMemo(() => (dsoOwnersData as any)?.items || dsoOwnersData || [], [dsoOwnersData]);

  const availableDsoOwners = useMemo(() => {
    if (!selectedSectorId || effectivePoType !== PurchaseOrderType.INSTITUTE_TO_DSO) return [];
    
    const results: Array<{ dsoOwnerId: string; dsoName: string }> = [];
    const seenUserIds = new Set<string>();

    dsoOwners.forEach((user: any) => {
      const userId = user.id || user.userId;
      if (!userId || seenUserIds.has(userId) || userId === currentUserId) return;

      const hasMatchingAssignment = user.districtSectorAssignments?.some((assignment: any) => {
        const targetSectorId = assignment.sectorId || assignment.districtSector?.sectorId || assignment.districtSector?.sector?.id;
        return targetSectorId === selectedSectorId;
      });

      const isDsoUser = user.role === 'DISTRICT_SECTOR_OWNER' || Boolean(user.districtSectorOwner);

      if (hasMatchingAssignment || (isDsoUser && (!user.districtSectorAssignments || user.districtSectorAssignments.length === 0))) {
        seenUserIds.add(userId);
        results.push({
          dsoOwnerId: userId,
          dsoName: `${user.firstName || 'DSO'} ${user.lastName || 'Owner'} (${user.email || 'No email'})`,
        });
      }
    });

    return results;
  }, [dsoOwners, selectedSectorId, effectivePoType, currentUserId]);

  const createMutation = useCreatePurchaseOrder();

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError(null);

    if (!couponGroupId) {
      setError('Please select a coupon group.');
      return;
    }
    const qty = parseInt(quantityAsked, 10);
    if (!qty || qty < 1) {
      setError('Enter a valid coupon quantity.');
      return;
    }
    if (!neftTransactionNo.trim()) {
      setError('NEFT / payment transaction reference is required.');
      return;
    }
    if (isInstitutePersona && effectivePoType === PurchaseOrderType.INSTITUTE_TO_DSO && useCustomTarget && !selectedTargetDsoOwnerId) {
      setError('Please select a recipient DSO.');
      return;
    }

    try {
      await createMutation.mutateAsync({
        type: effectivePoType,
        couponGroupId,
        quantityAsked: qty,
        neftTransactionNo: neftTransactionNo.trim(),
        message: message.trim() || undefined,
        paymentProof: file,
        workspaceMode,
        ...(isInstitutePersona && useCustomTarget && effectivePoType === PurchaseOrderType.INSTITUTE_TO_DSO
          ? { targetDistrictSectorOwnerId: selectedTargetDsoOwnerId }
          : {}),
      });
      onClose();
    } catch {
      // handled by mutation toast
    }
  };

  return (
    <Modal onClose={onClose} icon={FileText} iconClassName="text-primary" title="Raise Purchase Order">
      <form onSubmit={handleSubmit} className="p-4 space-y-4">
        {error && (
          <div className="p-2.5 rounded-lg border border-destructive/20 bg-destructive/5 text-destructive text-[10px] font-medium">
            {error}
          </div>
        )}

        <div className="p-2.5 rounded-lg bg-muted/30 border border-border/40 text-[11px] font-medium text-foreground">
          Requesting against:{' '}
          <span className="font-bold">
            {!isInstitutePersona
              ? 'Central Admin System (DSO Territory Route)'
              : isKitGroup
              ? 'Central Admin System (Kit Route)'
              : poTypeLabel}
          </span>
        </div>

        <div>
          <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
            Coupon Category / Group *
          </label>
          <select
            value={couponGroupId}
            onChange={(e) => {
              setCouponGroupId(e.target.value);
              setUseCustomTarget(false);
            }}
            className="w-full text-xs font-medium px-2.5 py-2 border border-border/40 bg-background rounded-lg focus:outline-none focus:border-primary text-foreground cursor-pointer"
            required
          >
            <option value="">-- Select Coupon Group --</option>
            {couponGroups
              .filter((g: any) => (g.type === 'KIT' ? isInstitutePersona : true))
              .map((group: any) => (
                <option key={group.id} value={group.id}>
                  {group.name} {group.price ? `(₹${group.price})` : ''} - [{group.type}]
                </option>
              ))}
          </select>
        </div>

        {/* ✅ TARGET DSO SELECTION (Renders when in Institute Persona and ordering normal/category coupons) */}
        {isInstitutePersona && effectivePoType === PurchaseOrderType.INSTITUTE_TO_DSO && (
          <div className="p-3 rounded-lg border border-border/50 bg-muted/10 space-y-3">
            <div className="flex items-center justify-between">
              <div className="flex flex-col">
                <label className="text-xs font-bold text-foreground cursor-pointer">
                  Select Target DSO
                </label>
                <span className="text-[10px] text-muted-foreground font-normal">
                  Uncheck to route directly to your assigned default DSO
                </span>
              </div>
              <input
                type="checkbox"
                checked={useCustomTarget}
                onChange={(e) => {
                  setUseCustomTarget(e.target.checked);
                  setSelectedDistrictId('');
                  setSelectedSectorId('');
                  setSelectedTargetDsoOwnerId('');
                }}
                className="h-4 w-4 rounded border-border text-primary focus:ring-primary cursor-pointer"
              />
            </div>

            {useCustomTarget && (
              <div className="space-y-2 pt-1 border-t border-border/20">
                <div>
                  <label className="block text-[10px] font-bold uppercase text-muted-foreground mb-1">
                    Select District *
                  </label>
                  <select
                    value={selectedDistrictId}
                    onChange={(e) => {
                      setSelectedDistrictId(e.target.value);
                      setSelectedSectorId('');
                      setSelectedTargetDsoOwnerId('');
                    }}
                    className="w-full text-xs font-medium px-2.5 py-1.5 border border-border/40 bg-background rounded-lg focus:outline-none focus:border-primary cursor-pointer"
                    required
                  >
                    <option value="">-- Select District --</option>
                    {districts.map((d: any) => (
                      <option key={d.id} value={d.id}>
                        {d.name}
                      </option>
                    ))}
                  </select>
                </div>

                {selectedDistrictId && (
                  <div>
                    <label className="block text-[10px] font-bold uppercase text-muted-foreground mb-1">
                      Select Sector *
                    </label>
                    <select
                      value={selectedSectorId}
                      onChange={(e) => {
                        setSelectedSectorId(e.target.value);
                        setSelectedTargetDsoOwnerId('');
                      }}
                      className="w-full text-xs font-medium px-2.5 py-1.5 border border-border/40 bg-background rounded-lg focus:outline-none focus:border-primary cursor-pointer"
                      required
                    >
                      <option value="">-- Select Sector --</option>
                      {sectors.map((s: any) => (
                        <option key={s.id || s.sectorId} value={s.sectorId || s.id}>
                          {s.name || s.sector?.name}
                        </option>
                      ))}
                    </select>
                  </div>
                )}

                {selectedSectorId && (
                  <div>
                    <label className="block text-[10px] font-bold uppercase text-muted-foreground mb-1">
                      Select Target DSO *
                    </label>
                    <select
                      value={selectedTargetDsoOwnerId}
                      onChange={(e) => setSelectedTargetDsoOwnerId(e.target.value)}
                      className="w-full text-xs font-medium px-2.5 py-1.5 border border-border/40 bg-background rounded-lg focus:outline-none focus:border-primary cursor-pointer"
                      required
                    >
                      <option value="">
                        {availableDsoOwners.length === 0
                          ? '-- No Active DSO Available for this Sector --'
                          : '-- Select DSO --'}
                      </option>
                      {availableDsoOwners.map((item) => (
                        <option key={item.dsoOwnerId} value={item.dsoOwnerId}>
                          {item.dsoName}
                        </option>
                      ))}
                    </select>
                  </div>
                )}
              </div>
            )}
          </div>
        )}

        <div>
          <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
            Coupon Quantity Requested *
          </label>
          <input
            type="number"
            min={1}
            value={quantityAsked}
            onChange={(e) => setQuantityAsked(e.target.value)}
            className="w-full text-xs font-medium px-3 py-2 border border-border/40 bg-background rounded-lg text-foreground focus:outline-none focus:border-primary"
            required
          />
        </div>

        <div>
          <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
            NEFT / Transaction Reference *
          </label>
          <input
            type="text"
            value={neftTransactionNo}
            onChange={(e) => setNeftTransactionNo(e.target.value)}
            placeholder="UTR / Reference number"
            className="w-full text-xs font-mono font-medium px-3 py-2 border border-border/40 bg-background rounded-lg text-foreground focus:outline-none focus:border-primary"
            required
          />
        </div>

        <div>
          <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
            Payment Proof (PDF/JPG/PNG)
          </label>
          <label className="flex items-center gap-2 w-full text-xs font-medium px-3 py-2 border border-dashed border-border/60 bg-background rounded-lg text-muted-foreground cursor-pointer hover:border-primary">
            <Upload className="h-3.5 w-3.5" />
            <span>{file ? file.name : 'Choose a file to attach'}</span>
            <input
              type="file"
              accept=".pdf,.jpg,.jpeg,.png"
              className="hidden"
              onChange={(e) => setFile(e.target.files?.[0] || null)}
            />
          </label>
        </div>

        <div>
          <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
            Notes
          </label>
          <textarea
            value={message}
            onChange={(e) => setMessage(e.target.value)}
            rows={2}
            placeholder="Optional notes for the reviewer…"
            className="w-full text-xs font-medium p-2.5 border border-border/40 bg-background rounded-lg text-foreground focus:outline-none focus:border-primary"
          />
        </div>

        <div className="flex items-center justify-end gap-2 border-t border-border/10 pt-3 mt-4">
          <Button type="button" variant="ghost" onClick={onClose} className="h-8 rounded-lg px-3 text-xs font-semibold cursor-pointer">
            Cancel
          </Button>
          <Button type="submit" disabled={createMutation.isPending} className="h-8 rounded-lg px-3 text-xs font-semibold shadow-sm cursor-pointer">
            {createMutation.isPending ? 'Submitting…' : 'Raise Purchase Order'}
          </Button>
        </div>
      </form>
    </Modal>
  );
}