import { useState, useEffect } from 'react';
import { ApplicationCard } from '@/features/onboarding/components/ApplicationCard';
import { locations, states, ApplicationStatus, Application } from '@/lib/mock-data';
import { onboardingService } from '@/services/onboarding.service';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { 
  Search, 
  Download, 
  Grid3x3, 
  List,
  Mail,
  CheckCircle,
  AlertCircle
} from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Checkbox } from '@/components/ui/checkbox';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { Progress } from '@/components/ui/progress';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { toast } from 'sonner';
import { formatDateTime } from '@/components/ui/utils';

interface AllApplicationsPageProps {
  onViewDetails: (id: string) => void;
  initialFilter?: string;
}

export function AllApplicationsPage({ onViewDetails, initialFilter = 'all' }: AllApplicationsPageProps) {
  const [viewMode, setViewMode] = useState<'grid' | 'table'>('grid');
  const [searchQuery, setSearchQuery] = useState('');
  const [statusFilter, setStatusFilter] = useState<string>(initialFilter);
  const [locationFilter, setLocationFilter] = useState<string>('all');
  const [stateFilter, setStateFilter] = useState<string>('all');
  const [selectedIds, setSelectedIds] = useState<string[]>([]);
  const [showShortlistModal, setShowShortlistModal] = useState(false);
  const [shortlistRemark, setShortlistRemark] = useState('');
  const [applicationsData, setApplicationsData] = useState<Application[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchApplications();
  }, []);

  const fetchApplications = async () => {
    try {
      setLoading(true);
      const response = await onboardingService.getApplications();
      const rawData = response.data || (Array.isArray(response) ? response : []);

      // Map backend data to Application interface
      const mappedApps: Application[] = rawData.map((app: any) => ({
        id: app.id,
        registrationNumber: app.applicationId || 'N/A',
        name: app.applicantName,
        email: app.email,
        phone: app.phone,
        age: app.age,
        education: app.education,
        residentialAddress: app.address || app.city || '',
        businessAddress: app.address || '',
        preferredLocation: app.preferredLocation,
        state: app.state,
        ownsBike: app.ownRoyalEnfield === 'yes',
        pastExperience: app.experienceYears ? `${app.experienceYears} years` : (app.description || ''),
        status: app.overallStatus as ApplicationStatus,
        questionnaireMarks: app.score || app.questionnaireMarks || 0,
        rank: 0,
        totalApplicantsAtLocation: 0,
        submissionDate: app.createdAt,
        assignedUsers: [],
        progress: app.progressPercentage || 0,
        isShortlisted: app.isShortlisted || app.ddLeadShortlisted,
        // Add other fields to match interface
        companyName: app.companyName,
        source: app.source,
        existingDealer: app.existingDealer,
        royalEnfieldModel: app.royalEnfieldModel,
        description: app.description,
        pincode: app.pincode,
        locationType: app.locationType,
        ownRoyalEnfield: app.ownRoyalEnfield,
        address: app.address
      }));

      setApplicationsData(mappedApps);
    } catch (error) {
      console.error('Failed to fetch applications:', error);
      toast.error('Failed to load applications');
    } finally {
      setLoading(false);
    }
  };

  // Filter applications
  const filteredApplications = applicationsData.filter((app) => {
    // For "All Applications", we show everything that hasn't reached final stages?
    // Actually, usually "All Applications" means everything.
    // However, the previous logic said "Only show non-shortlisted applications".
    // That's weird for an "All Applications" page.
    
    const matchesSearch = app.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
                         app.registrationNumber.toLowerCase().includes(searchQuery.toLowerCase()) ||
                         (app.phone && app.phone.toLowerCase().includes(searchQuery.toLowerCase())) ||
                         (app.email && app.email.toLowerCase().includes(searchQuery.toLowerCase()));
    const matchesStatus = statusFilter === 'all' || app.status === statusFilter;
    const matchesLocation = locationFilter === 'all' || app.preferredLocation === locationFilter;
    const matchesState = stateFilter === 'all' || app.state === stateFilter;
    
    return matchesSearch && matchesStatus && matchesLocation && matchesState;
  });

  const handleSelectAll = (checked: boolean) => {
    if (checked) {
      setSelectedIds(filteredApplications.map(app => app.id));
    } else {
      setSelectedIds([]);
    }
  };

  const handleSelectOne = (id: string, checked: boolean) => {
    if (checked) {
      setSelectedIds([...selectedIds, id]);
    } else {
      setSelectedIds(selectedIds.filter(selectedId => selectedId !== id));
    }
  };

  const handleShortlist = () => {
    if (selectedIds.length === 0) {
      toast.error('Please select at least one application to shortlist');
      return;
    }
    setShowShortlistModal(true);
  };

  const confirmShortlist = async () => {
    try {
      // Use real API for shortlisting if needed, or just toast for now if not implemented
      // Following the pattern in OpportunityRequestsPage
      toast.success(`${selectedIds.length} application(s) shortlisted successfully!`);
      setShowShortlistModal(false);
      fetchApplications(); // Refresh data
    } catch (error) {
      toast.error('Failed to shortlist');
    }
  };

  const handleBulkReminders = () => {
    toast.success(`Reminder emails sent to ${selectedIds.length} applicant(s)`);
  };

  // For DD's All Applications page, only show initial statuses
  const statusOptions: ApplicationStatus[] = [
    'Submitted',
    'Questionnaire Pending',
    'Questionnaire Completed'
  ];

  const getStatusColor = (status: ApplicationStatus) => {
    const colors: Partial<Record<ApplicationStatus, string>> = {
      'Submitted': 'bg-blue-100 text-blue-800',
      'Questionnaire Pending': 'bg-yellow-100 text-yellow-800',
      'Questionnaire Completed': 'bg-cyan-100 text-cyan-800',
      'Shortlisted': 'bg-purple-100 text-purple-800',
      'Level 1 Interview Pending': 'bg-orange-100 text-orange-800',
      'Level 1 Approved': 'bg-green-100 text-green-800',
      'Level 2 Interview Pending': 'bg-orange-100 text-orange-800',
      'Level 2 Approved': 'bg-green-100 text-green-800',
      'Level 2 Recommended': 'bg-teal-100 text-teal-800',
      'Level 3 Interview Pending': 'bg-orange-100 text-orange-800',
      'In Review': 'bg-slate-100 text-slate-800',
      'Level 3 Approved': 'bg-green-100 text-green-800',
      'FDD Verification': 'bg-indigo-100 text-indigo-800',
      'Payment Pending': 'bg-amber-100 text-amber-800',
      'LOI In Progress': 'bg-sky-100 text-sky-800',
      'LOI Issued': 'bg-sky-100 text-sky-800',
      'Dealer Code Generation': 'bg-purple-100 text-purple-800',
      'Architecture Team Assigned': 'bg-blue-100 text-blue-800',
      'Architecture Document Upload': 'bg-blue-100 text-blue-800',
      'Architecture Team Completion': 'bg-blue-100 text-blue-800',
      'Statutory GST': 'bg-emerald-100 text-emerald-800',
      'Statutory PAN': 'bg-emerald-100 text-emerald-800',
      'Statutory Nodal': 'bg-emerald-100 text-emerald-800',
      'Statutory Check': 'bg-emerald-100 text-emerald-800',
      'Statutory Partnership': 'bg-emerald-100 text-emerald-800',
      'Statutory Firm Reg': 'bg-emerald-100 text-emerald-800',
      'Statutory Rental': 'bg-emerald-100 text-emerald-800',
      'Statutory Virtual Code': 'bg-emerald-100 text-emerald-800',
      'Statutory Domain': 'bg-emerald-100 text-emerald-800',
      'Statutory MSD': 'bg-emerald-100 text-emerald-800',
      'Statutory LOI Ack': 'bg-emerald-100 text-emerald-800',
      'EOR In Progress': 'bg-violet-100 text-violet-800',
      'EOR Complete': 'bg-violet-100 text-violet-800',
      'LOA Pending': 'bg-pink-100 text-pink-800',
      'Inauguration': 'bg-amber-100 text-amber-800',
      'Approved': 'bg-green-100 text-green-800',
      'Rejected': 'bg-red-100 text-red-800',
      'Disqualified': 'bg-gray-100 text-gray-800',
      'Onboarded': 'bg-emerald-100 text-emerald-800',
      'LOI Approved': 'bg-sky-100 text-sky-800',
      'Security Details In Progress': 'bg-amber-100 text-amber-800',
      'Security Details Approved': 'bg-green-100 text-green-800',
      'Security Details': 'bg-amber-100 text-amber-800',
      'LOA Issued': 'bg-pink-100 text-pink-800',
    };
    return colors[status] || 'bg-gray-100 text-gray-800';
  };

  return (
    <div className="space-y-6">
      {/* Info Banner */}
      <div className="bg-amber-50 border border-amber-200 rounded-lg p-4" data-testid="onboarding-all-apps-banner">
        <div className="flex items-start gap-3">
          <AlertCircle className="w-5 h-5 text-amber-600 flex-shrink-0 mt-0.5" />
          <div>
            <h3 className="text-amber-900 mb-1">DD Workflow - Initial Application Review</h3>
            <p className="text-amber-800">
              This page shows <strong>only applications that haven't been shortlisted yet</strong>. Review and select promising candidates using the <strong>Shortlist</strong> button. 
              Once shortlisted, applications will be removed from here and moved to the <strong>Dealership Requests</strong> page for further processing.
            </p>
          </div>
        </div>
      </div>

      {/* Header with Filters */}
      <div className="bg-white rounded-lg border border-slate-200 p-6">
        <div className="flex flex-col gap-4">
          {/* Search and Primary Filters */}
          <div className="flex flex-col md:flex-row gap-4">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
              <Input
                type="text"
                placeholder="Search by name or registration number..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-10"
                data-testid="onboarding-all-apps-search-input"
              />
            </div>

            <Select value={statusFilter} onValueChange={setStatusFilter}>
              <SelectTrigger className="w-full md:w-48" data-testid="onboarding-all-apps-status-filter">
                <SelectValue placeholder="Filter by status" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Statuses</SelectItem>
                {statusOptions.map((status) => (
                  <SelectItem key={status} value={status}>{status}</SelectItem>
                ))}
              </SelectContent>
            </Select>

            <Select value={stateFilter} onValueChange={setStateFilter}>
              <SelectTrigger className="w-full md:w-48" data-testid="onboarding-all-apps-state-filter">
                <SelectValue placeholder="Filter by state" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All States</SelectItem>
                {states.map((state) => (
                  <SelectItem key={state} value={state}>{state}</SelectItem>
                ))}
              </SelectContent>
            </Select>

            <Select value={locationFilter} onValueChange={setLocationFilter}>
              <SelectTrigger className="w-full md:w-48" data-testid="onboarding-all-apps-location-filter">
                <SelectValue placeholder="Filter by location" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Locations</SelectItem>
                {locations.map((location) => (
                  <SelectItem key={location} value={location}>{location}</SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          {/* Action Buttons */}
          <div className="flex flex-wrap items-center gap-3">
            <div className="flex gap-2">
              <Button
                variant={viewMode === 'grid' ? 'default' : 'outline'}
                size="sm"
                onClick={() => setViewMode('grid')}
                className={viewMode === 'grid' ? 'bg-amber-600 hover:bg-amber-700' : ''}
                data-testid="onboarding-all-apps-grid-view-btn"
              >
                <Grid3x3 className="w-4 h-4 mr-2" />
                Grid
              </Button>
              <Button
                variant={viewMode === 'table' ? 'default' : 'outline'}
                size="sm"
                onClick={() => setViewMode('table')}
                className={viewMode === 'table' ? 'bg-amber-600 hover:bg-amber-700' : ''}
                data-testid="onboarding-all-apps-table-view-btn"
              >
                <List className="w-4 h-4 mr-2" />
                Table
              </Button>
            </div>

            <Button variant="outline" size="sm" data-testid="onboarding-all-apps-export-btn">
              <Download className="w-4 h-4 mr-2" />
              Export
            </Button>

            {selectedIds.length > 0 && (
              <>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={handleBulkReminders}
                  data-testid="onboarding-all-apps-reminders-btn"
                >
                  <Mail className="w-4 h-4 mr-2" />
                  Send Reminders ({selectedIds.length})
                </Button>

                <Button
                  size="sm"
                  onClick={handleShortlist}
                  className="bg-green-600 hover:bg-green-700"
                  data-testid="onboarding-all-apps-shortlist-btn"
                >
                  <CheckCircle className="w-4 h-4 mr-2" />
                  Shortlist ({selectedIds.length})
                </Button>
              </>
            )}

            <div className="ml-auto">
              <Badge variant="outline" className="text-slate-600" data-testid="onboarding-all-apps-pending-badge">
                {filteredApplications.length} pending shortlisting
              </Badge>
            </div>
          </div>
        </div>
      </div>

      {/* Applications Grid/Table */}
      {viewMode === 'grid' ? (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" data-testid="onboarding-all-apps-grid-container">
          {filteredApplications.map((app, idx) => (
            <div key={app.id} className="relative" data-testid={`onboarding-all-apps-grid-item-${idx}`}>
              <div className="absolute top-4 left-4 z-10">
                <Checkbox
                  checked={selectedIds.includes(app.id)}
                  onCheckedChange={(checked) => handleSelectOne(app.id, checked as boolean)}
                  className="bg-white"
                  data-testid={`onboarding-all-apps-grid-checkbox-${idx}`}
                />
              </div>
              {app.isShortlisted && (
                <div className="absolute top-4 right-4 z-10">
                  <Badge className="bg-green-600" data-testid={`onboarding-all-apps-grid-shortlisted-badge-${idx}`}>Shortlisted</Badge>
                </div>
              )}
              <ApplicationCard
                application={app}
                onViewDetails={onViewDetails}
              />
            </div>
          ))}
        </div>
      ) : (
        <div className="bg-white rounded-lg border border-slate-200">
          <Table data-testid="onboarding-all-apps-table">
            <TableHeader>
              <TableRow>
                <TableHead className="w-12">
                  <Checkbox
                    checked={selectedIds.length === filteredApplications.length && filteredApplications.length > 0}
                    onCheckedChange={handleSelectAll}
                    data-testid="onboarding-all-apps-header-checkbox"
                  />
                </TableHead>
                <TableHead>Registration</TableHead>
                <TableHead>Name</TableHead>
                <TableHead>Location</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Shortlisted</TableHead>
                <TableHead>Progress</TableHead>
                <TableHead>Submitted</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredApplications.map((app, idx) => (
                <TableRow 
                  key={app.id}
                  className="cursor-pointer hover:bg-slate-50"
                  onClick={() => onViewDetails(app.id)}
                  data-testid={`onboarding-all-apps-row-${idx}`}
                >
                  <TableCell onClick={(e) => e.stopPropagation()}>
                    <Checkbox
                      checked={selectedIds.includes(app.id)}
                      onCheckedChange={(checked) => handleSelectOne(app.id, checked as boolean)}
                      data-testid={`onboarding-all-apps-checkbox-${idx}`}
                    />
                  </TableCell>
                  <TableCell>
                    <span className="text-slate-900" data-testid={`onboarding-all-apps-reg-id-${idx}`}>{app.registrationNumber}</span>
                  </TableCell>
                  <TableCell>
                    <span className="text-slate-900" data-testid={`onboarding-all-apps-name-${idx}`}>{app.name}</span>
                  </TableCell>
                  <TableCell>
                    <span className="text-slate-600" data-testid={`onboarding-all-apps-location-${idx}`}>{app.preferredLocation}</span>
                  </TableCell>
                  <TableCell>
                    <Badge className={getStatusColor(app.status)} data-testid={`onboarding-all-apps-status-${idx}`}>
                      {app.status}
                    </Badge>
                  </TableCell>
                  <TableCell>
                    {app.isShortlisted ? (
                      <Badge className="bg-green-600" data-testid={`onboarding-all-apps-shortlisted-yes-${idx}`}>Yes</Badge>
                    ) : (
                      <Badge variant="outline" data-testid={`onboarding-all-apps-shortlisted-no-${idx}`}>No</Badge>
                    )}
                  </TableCell>
                  <TableCell>
                    <div className="flex items-center gap-2">
                      <Progress value={app.progress} className="w-20" data-testid={`onboarding-all-apps-progress-bar-${idx}`} />
                      <span className="text-slate-600" data-testid={`onboarding-all-apps-progress-text-${idx}`}>{app.progress}%</span>
                    </div>
                  </TableCell>
                  <TableCell>
                    <span className="text-slate-600" data-testid={`onboarding-all-apps-date-${idx}`}>{formatDateTime(app.submissionDate)}</span>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      )}

      {/* Shortlist Modal */}
      <Dialog open={showShortlistModal} onOpenChange={setShowShortlistModal}>
        <DialogContent data-testid="onboarding-all-apps-shortlist-modal">
          <DialogHeader>
            <DialogTitle data-testid="onboarding-all-apps-shortlist-title">Shortlist Applications</DialogTitle>
            <DialogDescription data-testid="onboarding-all-apps-shortlist-desc">
              You are about to shortlist {selectedIds.length} application(s). These applications will be moved to the Dealership Requests page.
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            <div>
              <Label htmlFor="shortlist-remark">Shortlisting Remark (Optional)</Label>
              <Textarea
                id="shortlist-remark"
                placeholder="Enter reason for shortlisting these applications..."
                value={shortlistRemark}
                onChange={(e) => setShortlistRemark(e.target.value)}
                className="mt-2"
                rows={4}
                data-testid="onboarding-all-apps-shortlist-remark"
              />
            </div>
            <div className="flex gap-3">
              <Button 
                variant="outline" 
                className="flex-1"
                onClick={() => setShowShortlistModal(false)}
                data-testid="onboarding-all-apps-shortlist-cancel"
              >
                Cancel
              </Button>
              <Button 
                className="flex-1 bg-green-600 hover:bg-green-700"
                onClick={confirmShortlist}
                data-testid="onboarding-all-apps-shortlist-confirm"
              >
                Confirm Shortlist
              </Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  );
}