'use client';

import { useState, useEffect, useRef, useCallback } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import {
  Shield,
  Upload,
  X,
  AlertCircle,
  Phone,
  Facebook,
  User,
  CreditCard,
  MapPin,
  Mail,
  FileText,
  Info,
  ImagePlus,
  Loader2,
  BadgeDollarSign,
  Calendar,
  ShoppingBag,
  CheckCircle2,
  Save,
  Eye,
  ChevronLeft,
  ChevronRight,
  Wallet,
  Smartphone,
  Sparkles,
} from 'lucide-react';
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  CardDescription,
} from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Button } from '@/components/ui/button';
import { Textarea } from '@/components/ui/textarea';
import { Badge } from '@/components/ui/badge';
import { Separator } from '@/components/ui/separator';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { useAppStore } from '@/store/app-store';
import { useLangStore } from '@/store/lang-store';
import { toast } from 'sonner';
import type { ScamCategoryType } from '@/types';

// ─── Bangladesh Districts ─────────────────────────────────────────────────────

const BANGLADESH_DISTRICTS = [
  'Dhaka',
  'Chittagong',
  'Khulna',
  'Rajshahi',
  'Sylhet',
  'Barisal',
  'Rangpur',
  'Mymensingh',
  'Comilla',
  'Gazipur',
  'Narayanganj',
  'Others',
];

// ─── Form State Interface ─────────────────────────────────────────────────────

interface FormErrors {
  title?: string;
  description?: string;
  scamType?: string;
  facebookUrl?: string;
  contactEmail?: string;
  amountLost?: string;
  scammerPhone?: string;
  bKashNumber?: string;
}

interface UploadedFile {
  file: File;
  preview: string;
  uploaded: boolean;
  url?: string;
  fileName?: string;
  fileSize?: number;
  fileType?: string;
}

// ─── Draft Helpers ────────────────────────────────────────────────────────────

const DRAFT_KEY = 'scamchecker_report_draft';

interface DraftData {
  scamType: string;
  title: string;
  description: string;
  scammerPhone: string;
  bKashNumber: string;
  nagadNumber: string;
  facebookUrl: string;
  sellerName: string;
  amountLost: string;
  transactionDate: string;
  district: string;
  contactEmail: string;
  savedAt: string;
}

function saveDraft(data: Omit<DraftData, 'savedAt'>): void {
  try {
    const draft: DraftData = { ...data, savedAt: new Date().toISOString() };
    localStorage.setItem(DRAFT_KEY, JSON.stringify(draft));
  } catch {
    // Silently fail
  }
}

function loadDraft(): DraftData | null {
  try {
    const stored = localStorage.getItem(DRAFT_KEY);
    return stored ? JSON.parse(stored) : null;
  } catch {
    return null;
  }
}

function clearDraft(): void {
  try {
    localStorage.removeItem(DRAFT_KEY);
  } catch {
    // Silently fail
  }
}

// ─── Step Config ──────────────────────────────────────────────────────────────

const STEPS = [
  { id: 1, title: 'Scam Details', icon: FileText, color: 'text-emerald-500' },
  { id: 2, title: 'Scammer Info', icon: User, color: 'text-orange-500' },
  { id: 3, title: 'Financial', icon: CreditCard, color: 'text-red-500' },
  { id: 4, title: 'Evidence', icon: Upload, color: 'text-teal-500' },
  { id: 5, title: 'Review', icon: Eye, color: 'text-emerald-500' },
];

// ─── Animation Variants ───────────────────────────────────────────────────────

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { staggerChildren: 0.08 },
  },
};

const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0, transition: { duration: 0.4, ease: 'easeOut' } },
};

const slideVariants = {
  enter: (direction: number) => ({
    x: direction > 0 ? 300 : -300,
    opacity: 0,
  }),
  center: {
    x: 0,
    opacity: 1,
  },
  exit: (direction: number) => ({
    x: direction < 0 ? 300 : -300,
    opacity: 0,
  }),
};

// ─── Success Animation Component ──────────────────────────────────────────────

function SuccessAnimation() {
  return (
    <div className="flex flex-col items-center justify-center py-16">
      <motion.div
        initial={{ scale: 0 }}
        animate={{ scale: 1 }}
        transition={{ type: 'spring', stiffness: 200, damping: 15, delay: 0.2 }}
      >
        <motion.div
          animate={{
            scale: [1, 1.2, 1],
            filter: [
              'drop-shadow(0 0 0px oklch(0.558 0.158 155 / 0))',
              'drop-shadow(0 0 30px oklch(0.558 0.158 155 / 0.6))',
              'drop-shadow(0 0 10px oklch(0.558 0.158 155 / 0.3))',
            ],
          }}
          transition={{ duration: 1, delay: 0.5 }}
          className="p-6 rounded-full bg-emerald-500/10"
        >
          <CheckCircle2 className="h-20 w-20 text-emerald-500" />
        </motion.div>
      </motion.div>

      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.8 }}
        className="text-center mt-6"
      >
        <h2 className="text-2xl sm:text-3xl font-bold mb-2">Report Submitted!</h2>
        <p className="text-muted-foreground max-w-md mx-auto mb-6">
          Thank you for helping protect the community. Your report will be reviewed by our moderators.
        </p>
        <div className="flex flex-col sm:flex-row gap-3 justify-center">
          <Button
            onClick={() => useAppStore.getState().navigate('search')}
            className="bg-emerald-600 hover:bg-emerald-700 gap-2"
          >
            <Eye className="h-4 w-4" />
            Browse Reports
          </Button>
          <Button
            variant="outline"
            onClick={() => useAppStore.getState().navigate('home')}
            className="gap-2"
          >
            Back to Home
          </Button>
        </div>
      </motion.div>

      {/* Confetti-like particles */}
      {Array.from({ length: 12 }).map((_, i) => (
        <motion.div
          key={i}
          initial={{
            x: 0,
            y: 0,
            scale: 0,
            opacity: 1,
          }}
          animate={{
            x: (Math.random() - 0.5) * 400,
            y: (Math.random() - 0.5) * 400 - 100,
            scale: [0, 1, 0],
            opacity: [0, 1, 0],
            rotate: Math.random() * 720 - 360,
          }}
          transition={{
            duration: 1.5,
            delay: 0.3 + i * 0.05,
            ease: 'easeOut',
          }}
          className="absolute top-1/2 left-1/2 w-3 h-3 rounded-full"
          style={{
            backgroundColor: [
              '#10b981', '#34d399', '#6ee7b7', '#fbbf24', '#f97316',
            ][i % 5],
          }}
        />
      ))}
    </div>
  );
}

// ─── Main Component ───────────────────────────────────────────────────────────

export function ReportPage() {
  const user = useAppStore((s) => s.user);
  const navigate = useAppStore((s) => s.navigate);
  const setSelectedReportId = useAppStore((s) => s.setSelectedReportId);

  const [categories, setCategories] = useState<ScamCategoryType[]>([]);
  const [isLoadingCategories, setIsLoadingCategories] = useState(true);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isUploading, setIsUploading] = useState(false);
  const [isSubmitted, setIsSubmitted] = useState(false);

  // Step state
  const [currentStep, setCurrentStep] = useState(1);
  const [direction, setDirection] = useState(0);

  // Form fields
  const [scamType, setScamType] = useState('');
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const [scammerPhone, setScammerPhone] = useState('');
  const [bKashNumber, setBkashNumber] = useState('');
  const [nagadNumber, setNagadNumber] = useState('');
  const [facebookUrl, setFacebookUrl] = useState('');
  const [sellerName, setSellerName] = useState('');
  const [amountLost, setAmountLost] = useState('');
  const [transactionDate, setTransactionDate] = useState('');
  const [district, setDistrict] = useState('');
  const [contactEmail, setContactEmail] = useState('');
  const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([]);
  const [errors, setErrors] = useState<FormErrors>({});

  // Drag state
  const [isDragOver, setIsDragOver] = useState(false);

  // Draft indicator
  const [hasDraft, setHasDraft] = useState(false);

  // OCR state
  const [isOcrAnalyzing, setIsOcrAnalyzing] = useState(false);
  const ocrInputRef = useRef<HTMLInputElement>(null);

  const fileInputRef = useRef<HTMLInputElement>(null);

  // ─── Load Draft on Mount ─────────────────────────────────────────────────

  useEffect(() => {
    const draft = loadDraft();
    if (draft) {
      setHasDraft(true);
    }
  }, []);

  const handleLoadDraft = useCallback(() => {
    const draft = loadDraft();
    if (draft) {
      setScamType(draft.scamType);
      setTitle(draft.title);
      setDescription(draft.description);
      setScammerPhone(draft.scammerPhone);
      setBkashNumber(draft.bKashNumber);
      setNagadNumber(draft.nagadNumber);
      setFacebookUrl(draft.facebookUrl);
      setSellerName(draft.sellerName);
      setAmountLost(draft.amountLost);
      setTransactionDate(draft.transactionDate);
      setDistrict(draft.district);
      setContactEmail(draft.contactEmail);
      setHasDraft(false);
      toast.success('Draft loaded successfully!');
    }
  }, []);

  const handleSaveDraft = useCallback(() => {
    saveDraft({
      scamType,
      title,
      description,
      scammerPhone,
      bKashNumber,
      nagadNumber,
      facebookUrl,
      sellerName,
      amountLost,
      transactionDate,
      district,
      contactEmail,
    });
    setHasDraft(true);
    toast.success('Draft saved!', {
      description: 'You can continue later from where you left off.',
    });
  }, [scamType, title, description, scammerPhone, bKashNumber, nagadNumber, facebookUrl, sellerName, amountLost, transactionDate, district, contactEmail]);

  // ─── Fetch Categories ─────────────────────────────────────────────────────

  useEffect(() => {
    fetch('/api/categories')
      .then((res) => res.json())
      .then((data) => {
        if (data.success) setCategories(data.data);
      })
      .catch(() => {})
      .finally(() => setIsLoadingCategories(false));
  }, []);

  // ─── Auto-save draft periodically ────────────────────────────────────────

  useEffect(() => {
    const timer = setInterval(() => {
      if (title || description || scamType) {
        saveDraft({
          scamType,
          title,
          description,
          scammerPhone,
          bKashNumber,
          nagadNumber,
          facebookUrl,
          sellerName,
          amountLost,
          transactionDate,
          district,
          contactEmail,
        });
      }
    }, 30000); // Auto-save every 30 seconds
    return () => clearInterval(timer);
  }, [scamType, title, description, scammerPhone, bKashNumber, nagadNumber, facebookUrl, sellerName, amountLost, transactionDate, district, contactEmail]);

  // ─── Step Validation ─────────────────────────────────────────────────────

  const validateStep = useCallback((step: number): boolean => {
    const newErrors: FormErrors = {};

    if (step === 1) {
      if (!title.trim()) {
        newErrors.title = 'Title is required';
      } else if (title.trim().length < 5) {
        newErrors.title = 'Title must be at least 5 characters';
      }
      if (!description.trim()) {
        newErrors.description = 'Description is required';
      } else if (description.trim().length < 20) {
        newErrors.description = 'Description must be at least 20 characters';
      }
      if (!scamType) {
        newErrors.scamType = 'Please select a scam category';
      }
    }

    if (step === 2) {
      if (facebookUrl.trim() && !facebookUrl.trim().startsWith('http')) {
        newErrors.facebookUrl = 'Please enter a valid URL starting with http';
      }
      if (scammerPhone.trim() && !/^[\d+\-\s()]{6,15}$/.test(scammerPhone.trim())) {
        newErrors.scammerPhone = 'Please enter a valid phone number';
      }
      if (bKashNumber.trim() && !/^01\d{9}$/.test(bKashNumber.trim())) {
        newErrors.bKashNumber = 'bKash number should be 11 digits starting with 01';
      }
    }

    if (step === 3) {
      if (amountLost && parseFloat(amountLost) < 0) {
        newErrors.amountLost = 'Amount cannot be negative';
      }
      if (contactEmail.trim() && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(contactEmail.trim())) {
        newErrors.contactEmail = 'Please enter a valid email address';
      }
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  }, [title, description, scamType, facebookUrl, scammerPhone, bKashNumber, amountLost, contactEmail]);

  const goNext = useCallback(() => {
    if (currentStep < 5 && validateStep(currentStep)) {
      setDirection(1);
      setCurrentStep((s) => s + 1);
    }
  }, [currentStep, validateStep]);

  const goPrev = useCallback(() => {
    if (currentStep > 1) {
      setDirection(-1);
      setCurrentStep((s) => s - 1);
      setErrors({});
    }
  }, [currentStep]);

  // ─── File Upload ──────────────────────────────────────────────────────────

  const handleFileSelect = useCallback(
    async (files: FileList | null) => {
      if (!files) return;

      const allowedTypes = ['image/png', 'image/jpeg', 'image/jpg', 'image/webp'];
      const maxSize = 5 * 1024 * 1024; // 5MB

      const newFiles: UploadedFile[] = [];

      for (const file of Array.from(files)) {
        if (!allowedTypes.includes(file.type)) {
          toast.error(`${file.name}: Only PNG, JPG, JPEG, and WebP images are allowed`);
          continue;
        }
        if (file.size > maxSize) {
          toast.error(`${file.name}: File must be less than 5MB`);
          continue;
        }

        const preview = URL.createObjectURL(file);
        newFiles.push({ file, preview, uploaded: false });
      }

      if (newFiles.length === 0) return;

      setUploadedFiles((prev) => [...prev, ...newFiles]);

      // Upload files one by one
      setIsUploading(true);
      for (const newFile of newFiles) {
        try {
          const formData = new FormData();
          formData.append('file', newFile.file);

          const res = await fetch('/api/upload', { method: 'POST', body: formData });
          const data = await res.json();

          if (data.success) {
            setUploadedFiles((prev) =>
              prev.map((f) =>
                f.preview === newFile.preview
                  ? {
                      ...f,
                      uploaded: true,
                      url: data.data.url,
                      fileName: data.data.fileName,
                      fileSize: data.data.fileSize,
                      fileType: newFile.file.type,
                    }
                  : f
              )
            );
          } else {
            toast.error(`Upload failed: ${data.error}`);
            setUploadedFiles((prev) => prev.filter((f) => f.preview !== newFile.preview));
          }
        } catch {
          toast.error(`Upload failed for ${newFile.file.name}`);
          setUploadedFiles((prev) => prev.filter((f) => f.preview !== newFile.preview));
        }
      }
      setIsUploading(false);
    },
    []
  );

  const handleRemoveFile = useCallback((preview: string) => {
    setUploadedFiles((prev) => {
      const file = prev.find((f) => f.preview === preview);
      if (file) URL.revokeObjectURL(file.preview);
      return prev.filter((f) => f.preview !== preview);
    });
  }, []);

  const handleDrop = useCallback(
    (e: React.DragEvent) => {
      e.preventDefault();
      e.stopPropagation();
      setIsDragOver(false);
      handleFileSelect(e.dataTransfer.files);
    },
    [handleFileSelect]
  );

  const handleDragOver = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setIsDragOver(true);
  }, []);

  const handleDragLeave = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setIsDragOver(false);
  }, []);

  // ─── OCR Auto-Fill Handler ───────────────────────────────────────────────

  const handleOcrAutoFill = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    if (!file.type.startsWith('image/')) {
      toast.error('Please select an image file');
      return;
    }

    if (file.size > 5 * 1024 * 1024) {
      toast.error('Image must be less than 5MB');
      return;
    }

    setIsOcrAnalyzing(true);
    const t = useLangStore.getState().t;

    try {
      // Convert to base64
      const reader = new FileReader();
      const base64Promise = new Promise<string>((resolve, reject) => {
        reader.onload = () => resolve(reader.result as string);
        reader.onerror = reject;
        reader.readAsDataURL(file);
      });

      const base64Image = await base64Promise;

      // Call OCR API
      const res = await fetch('/api/ocr-analyze', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ image: base64Image }),
      });

      const data = await res.json();

      if (data.success && data.data) {
        const ocrData = data.data;
        let filledFields: string[] = [];

        // Auto-fill phone number
        if (ocrData.phoneNumbers?.length > 0 && !scammerPhone) {
          setScammerPhone(ocrData.phoneNumbers[0]);
          filledFields.push('Phone');
        }

        // Auto-fill bKash number
        if (ocrData.bkashNumbers?.length > 0 && !bKashNumber) {
          setBkashNumber(ocrData.bkashNumbers[0]);
          filledFields.push('bKash');
        }

        // Auto-fill Nagad number
        if (ocrData.nagadNumbers?.length > 0 && !nagadNumber) {
          setNagadNumber(ocrData.nagadNumbers[0]);
          filledFields.push('Nagad');
        }

        // Auto-fill Facebook profile
        if (ocrData.facebookProfiles?.length > 0 && !facebookUrl) {
          setFacebookUrl(ocrData.facebookProfiles[0]);
          filledFields.push('Facebook');
        }

        // Auto-fill amount lost
        if (ocrData.amounts?.length > 0 && !amountLost) {
          const cleanAmount = ocrData.amounts[0].replace(/[^\d.]/g, '');
          if (cleanAmount) {
            setAmountLost(cleanAmount);
            filledFields.push('Amount');
          }
        }

        // Auto-fill scam type
        if (ocrData.scamType && !scamType) {
          const matchedCategory = categories.find(
            (cat) => cat.slug === ocrData.scamType || cat.name.toLowerCase().includes(ocrData.scamType.toLowerCase())
          );
          if (matchedCategory) {
            setScamType(matchedCategory.slug);
            filledFields.push('Category');
          }
        }

        // Auto-fill seller name
        if (ocrData.sellerName && !sellerName) {
          setSellerName(ocrData.sellerName);
          filledFields.push('Seller');
        }

        // Auto-fill description
        if (ocrData.description && !description) {
          setDescription(ocrData.description);
          filledFields.push('Description');
        }

        if (filledFields.length > 0) {
          toast.success(t('report.autoFillDetected'), {
            description: `Detected: ${filledFields.join(', ')}`,
          });
        } else {
          toast.info(t('report.autoFillNothing'));
        }
      } else {
        toast.error(t('report.autoFillError'));
      }
    } catch {
      toast.error(t('report.autoFillError'));
    } finally {
      setIsOcrAnalyzing(false);
      // Reset input so same file can be selected again
      if (ocrInputRef.current) ocrInputRef.current.value = '';
    }
  }, [scammerPhone, bKashNumber, nagadNumber, facebookUrl, amountLost, scamType, sellerName, description, categories]);

  // ─── Submit ───────────────────────────────────────────────────────────────

  const handleSubmit = useCallback(async () => {
    if (!user) {
      toast.error('Please log in to submit a report');
      return;
    }

    // Validate all steps
    for (let step = 1; step <= 3; step++) {
      if (!validateStep(step)) {
        setCurrentStep(step);
        toast.error('Please fix the errors before submitting');
        return;
      }
    }

    // Check all files are uploaded
    const pendingFiles = uploadedFiles.filter((f) => !f.uploaded);
    if (pendingFiles.length > 0) {
      toast.error('Please wait for all files to finish uploading');
      return;
    }

    setIsSubmitting(true);

    try {
      const evidence = uploadedFiles
        .filter((f) => f.uploaded && f.url)
        .map((f) => ({
          fileType: f.fileType || 'image',
          fileUrl: f.url!,
          fileName: f.fileName || f.file.name,
        }));

      const body = {
        title: title.trim(),
        description: description.trim(),
        scamType,
        scammerPhone: scammerPhone.trim() || undefined,
        bKashNumber: bKashNumber.trim() || undefined,
        nagadNumber: nagadNumber.trim() || undefined,
        facebookUrl: facebookUrl.trim() || undefined,
        sellerName: sellerName.trim() || undefined,
        amountLost: amountLost ? parseFloat(amountLost) : 0,
        transactionDate: transactionDate || undefined,
        district: district || undefined,
        contactEmail: contactEmail.trim() || undefined,
        reporterId: user.id,
        evidence,
      };

      const res = await fetch('/api/reports', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body),
      });

      const data = await res.json();

      if (data.success) {
        clearDraft();
        setHasDraft(false);
        setSelectedReportId(data.data.id);
        setIsSubmitted(true);
        toast.success('Report submitted successfully! Thank you for helping the community.');
      } else {
        toast.error(data.error || 'Failed to submit report');
      }
    } catch {
      toast.error('Something went wrong. Please try again.');
    } finally {
      setIsSubmitting(false);
    }
  }, [
    user,
    validateStep,
    uploadedFiles,
    title,
    description,
    scamType,
    scammerPhone,
    bKashNumber,
    nagadNumber,
    facebookUrl,
    sellerName,
    amountLost,
    transactionDate,
    district,
    contactEmail,
    setSelectedReportId,
  ]);

  // ─── Not Logged In ────────────────────────────────────────────────────────

  if (!user) {
    return (
      <div className="max-w-2xl mx-auto px-4 py-16">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
        >
          <Card className="border-emerald-500/20 shadow-lg">
            <CardContent className="py-16 flex flex-col items-center text-center">
              <motion.div
                animate={{
                  filter: [
                    'drop-shadow(0 0 8px oklch(0.558 0.158 155 / 0.3))',
                    'drop-shadow(0 0 20px oklch(0.558 0.158 155 / 0.6))',
                    'drop-shadow(0 0 8px oklch(0.558 0.158 155 / 0.3))',
                  ],
                }}
                transition={{ duration: 3, repeat: Infinity, ease: 'easeInOut' }}
              >
                <Shield className="h-16 w-16 text-emerald-500 mb-4" />
              </motion.div>
              <h2 className="text-2xl font-bold mb-2">Login Required</h2>
              <p className="text-muted-foreground mb-6 max-w-sm">
                You need to be logged in to report a scam. This helps us verify reports and prevent
                misuse.
              </p>
              <div className="flex flex-col sm:flex-row gap-3">
                <Button
                  onClick={() => navigate('login')}
                  className="bg-emerald-600 hover:bg-emerald-700"
                >
                  Login
                </Button>
                <Button variant="outline" onClick={() => navigate('register')}>
                  Create Account
                </Button>
              </div>
            </CardContent>
          </Card>
        </motion.div>
      </div>
    );
  }

  // ─── Success State ────────────────────────────────────────────────────────

  if (isSubmitted) {
    return (
      <div className="max-w-2xl mx-auto px-4 py-8 relative overflow-hidden">
        <SuccessAnimation />
      </div>
    );
  }

  // ─── Logged In: Stepped Form ─────────────────────────────────────────────

  return (
    <div className="max-w-3xl mx-auto px-4 py-6 sm:py-8">
      <motion.div variants={containerVariants} initial="hidden" animate="visible">
        {/* ─── Header ──────────────────────────────────────────────────────── */}
        <motion.div variants={itemVariants} className="mb-6">
          <div className="flex items-center justify-between gap-3 mb-2">
            <div className="flex items-center gap-3">
              <div className="p-2.5 rounded-xl bg-emerald-500/10">
                <Shield className="h-6 w-6 text-emerald-500" />
              </div>
              <div>
                <h1 className="text-2xl sm:text-3xl font-bold">Report a Scam</h1>
                <p className="text-muted-foreground text-sm">
                  Help protect the community by reporting fraudulent activity
                </p>
              </div>
            </div>
            <Button
              variant="ghost"
              size="sm"
              onClick={handleSaveDraft}
              className="gap-1.5 text-muted-foreground hover:text-emerald-500 hover:bg-emerald-500/10 shrink-0"
            >
              <Save className="h-4 w-4" />
              <span className="hidden sm:inline">Save Draft</span>
            </Button>
          </div>

          {/* Draft indicator */}
          {hasDraft && (
            <motion.div
              initial={{ opacity: 0, height: 0 }}
              animate={{ opacity: 1, height: 'auto' }}
              exit={{ opacity: 0, height: 0 }}
              className="mb-4"
            >
              <div className="flex items-center justify-between p-3 rounded-lg bg-emerald-500/5 border border-emerald-500/20">
                <div className="flex items-center gap-2 text-sm text-emerald-600 dark:text-emerald-400">
                  <Save className="h-4 w-4" />
                  You have a saved draft
                </div>
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={handleLoadDraft}
                  className="text-xs text-emerald-600 hover:text-emerald-700 hover:bg-emerald-500/10"
                >
                  Load Draft
                </Button>
              </div>
            </motion.div>
          )}
        </motion.div>

        {/* ─── Step Indicators ─────────────────────────────────────────────── */}
        <motion.div variants={itemVariants} className="mb-6">
          <div className="relative">
            {/* Progress line */}
            <div className="absolute top-5 left-5 right-5 h-0.5 bg-muted">
              <motion.div
                className="h-full bg-emerald-500 rounded-full"
                animate={{ width: `${((currentStep - 1) / (STEPS.length - 1)) * 100}%` }}
                transition={{ duration: 0.3, ease: 'easeInOut' }}
              />
            </div>

            {/* Step circles */}
            <div className="relative flex items-start justify-between">
              {STEPS.map((step) => {
                const StepIcon = step.icon;
                const isActive = currentStep === step.id;
                const isCompleted = currentStep > step.id;
                return (
                  <button
                    key={step.id}
                    onClick={() => {
                      if (isCompleted) {
                        setDirection(step.id > currentStep ? 1 : -1);
                        setCurrentStep(step.id);
                        setErrors({});
                      }
                    }}
                    className="flex flex-col items-center gap-1.5 group"
                  >
                    <motion.div
                      animate={{
                        scale: isActive ? 1.1 : 1,
                      }}
                      className={`w-10 h-10 rounded-full flex items-center justify-center border-2 transition-all ${
                        isCompleted
                          ? 'bg-emerald-500 border-emerald-500 text-white'
                          : isActive
                          ? 'bg-emerald-500/10 border-emerald-500 text-emerald-500'
                          : 'bg-background border-muted text-muted-foreground'
                      }`}
                    >
                      {isCompleted ? (
                        <CheckCircle2 className="h-5 w-5" />
                      ) : (
                        <StepIcon className="h-4 w-4" />
                      )}
                    </motion.div>
                    <span
                      className={`text-[10px] sm:text-xs font-medium whitespace-nowrap ${
                        isActive ? 'text-emerald-500' : isCompleted ? 'text-emerald-600 dark:text-emerald-400' : 'text-muted-foreground'
                      }`}
                    >
                      {step.title}
                    </span>
                    <span className="text-[10px] text-muted-foreground">
                      {step.id}/{STEPS.length}
                    </span>
                  </button>
                );
              })}
            </div>
          </div>
        </motion.div>

        {/* ─── Step Content ────────────────────────────────────────────────── */}
        <AnimatePresence mode="wait" custom={direction}>
          {/* Step 1: Scam Details */}
          {currentStep === 1 && (
            <motion.div
              key="step-1"
              custom={direction}
              variants={slideVariants}
              initial="enter"
              animate="center"
              exit="exit"
              transition={{ duration: 0.3 }}
            >
              <Card className="border-border/50">
                <CardHeader>
                  <div className="flex items-center gap-2">
                    <FileText className="h-5 w-5 text-emerald-500" />
                    <CardTitle className="text-lg">Scam Details</CardTitle>
                    <Badge variant="secondary" className="text-xs ml-auto">Step 1/5</Badge>
                  </div>
                  <CardDescription>
                    Provide the basic information about the scam incident
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  {/* Scam Category */}
                  <div className="space-y-2">
                    <Label htmlFor="scamType">
                      Scam Category <span className="text-destructive">*</span>
                    </Label>
                    <Select value={scamType} onValueChange={(v) => { setScamType(v); if (errors.scamType) setErrors((prev) => ({ ...prev, scamType: undefined })); }}>
                      <SelectTrigger className={`w-full ${errors.scamType ? 'border-destructive' : ''}`}>
                        <SelectValue
                          placeholder={isLoadingCategories ? 'Loading categories...' : 'Select a category'}
                        />
                      </SelectTrigger>
                      <SelectContent>
                        {categories.map((cat) => (
                          <SelectItem key={cat.id} value={cat.slug}>
                            {cat.name}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    {errors.scamType && (
                      <p className="text-sm text-destructive flex items-center gap-1">
                        <AlertCircle className="h-3.5 w-3.5" />
                        {errors.scamType}
                      </p>
                    )}
                  </div>

                  {/* Title */}
                  <div className="space-y-2">
                    <Label htmlFor="title">
                      Title <span className="text-destructive">*</span>
                    </Label>
                    <Input
                      id="title"
                      placeholder="e.g., Fake online shop - ElectronicsBD"
                      value={title}
                      onChange={(e) => {
                        setTitle(e.target.value);
                        if (errors.title) setErrors((prev) => ({ ...prev, title: undefined }));
                      }}
                      className={errors.title ? 'border-destructive' : ''}
                    />
                    {errors.title && (
                      <p className="text-sm text-destructive flex items-center gap-1">
                        <AlertCircle className="h-3.5 w-3.5" />
                        {errors.title}
                      </p>
                    )}
                  </div>

                  {/* Description */}
                  <div className="space-y-2">
                    <Label htmlFor="description">
                      Description <span className="text-destructive">*</span>
                    </Label>
                    <Textarea
                      id="description"
                      placeholder="Describe the scam in detail. What happened? How did the scammer operate? Include any relevant details that could help others..."
                      rows={5}
                      value={description}
                      onChange={(e) => {
                        setDescription(e.target.value);
                        if (errors.description) setErrors((prev) => ({ ...prev, description: undefined }));
                      }}
                      className={`${errors.description ? 'border-destructive' : ''} resize-none`}
                    />
                    <div className="flex justify-between items-center">
                      {errors.description ? (
                        <p className="text-sm text-destructive flex items-center gap-1">
                          <AlertCircle className="h-3.5 w-3.5" />
                          {errors.description}
                        </p>
                      ) : (
                        <span />
                      )}
                      <span
                        className={`text-xs ${
                          description.length < 20
                            ? 'text-muted-foreground'
                            : 'text-emerald-500'
                        }`}
                      >
                        {description.length}/20 min
                      </span>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </motion.div>
          )}

          {/* Step 2: Scammer Information */}
          {currentStep === 2 && (
            <motion.div
              key="step-2"
              custom={direction}
              variants={slideVariants}
              initial="enter"
              animate="center"
              exit="exit"
              transition={{ duration: 0.3 }}
            >
              <Card className="border-border/50">
                <CardHeader>
                  <div className="flex items-center gap-2">
                    <User className="h-5 w-5 text-orange-500" />
                    <CardTitle className="text-lg">Scammer Information</CardTitle>
                    <Badge variant="secondary" className="text-xs ml-auto">Step 2/5</Badge>
                  </div>
                  <CardDescription>
                    Provide any details you have about the scammer (all optional but helpful)
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    {/* Phone Number */}
                    <div className="space-y-2">
                      <Label htmlFor="scammerPhone" className="flex items-center gap-1.5">
                        <Phone className="h-3.5 w-3.5 text-blue-500" />
                        Phone Number
                      </Label>
                      <Input
                        id="scammerPhone"
                        placeholder="+880 1XXX-XXXXXX"
                        value={scammerPhone}
                        onChange={(e) => {
                          setScammerPhone(e.target.value);
                          if (errors.scammerPhone) setErrors((prev) => ({ ...prev, scammerPhone: undefined }));
                        }}
                        className={errors.scammerPhone ? 'border-destructive' : ''}
                      />
                      {errors.scammerPhone ? (
                        <p className="text-sm text-destructive flex items-center gap-1">
                          <AlertCircle className="h-3.5 w-3.5" />
                          {errors.scammerPhone}
                        </p>
                      ) : (
                        <p className="text-xs text-muted-foreground">Use +880 format</p>
                      )}
                    </div>

                    {/* bKash Number */}
                    <div className="space-y-2">
                      <Label htmlFor="bKashNumber" className="flex items-center gap-1.5">
                        <Wallet className="h-3.5 w-3.5 text-pink-500" />
                        bKash Number
                      </Label>
                      <Input
                        id="bKashNumber"
                        placeholder="01XXXXXXXXX"
                        value={bKashNumber}
                        onChange={(e) => {
                          setBkashNumber(e.target.value);
                          if (errors.bKashNumber) setErrors((prev) => ({ ...prev, bKashNumber: undefined }));
                        }}
                        className={`focus-visible:border-pink-500/50 ${errors.bKashNumber ? 'border-destructive' : ''}`}
                      />
                      {errors.bKashNumber && (
                        <p className="text-sm text-destructive flex items-center gap-1">
                          <AlertCircle className="h-3.5 w-3.5" />
                          {errors.bKashNumber}
                        </p>
                      )}
                    </div>

                    {/* Nagad Number */}
                    <div className="space-y-2">
                      <Label htmlFor="nagadNumber" className="flex items-center gap-1.5">
                        <Smartphone className="h-3.5 w-3.5 text-orange-500" />
                        Nagad Number
                      </Label>
                      <Input
                        id="nagadNumber"
                        placeholder="01XXXXXXXXX"
                        value={nagadNumber}
                        onChange={(e) => setNagadNumber(e.target.value)}
                        className="focus-visible:border-orange-500/50"
                      />
                    </div>

                    {/* Seller Name */}
                    <div className="space-y-2">
                      <Label htmlFor="sellerName" className="flex items-center gap-1.5">
                        <ShoppingBag className="h-3.5 w-3.5 text-purple-500" />
                        Seller Name
                      </Label>
                      <Input
                        id="sellerName"
                        placeholder="Name of the seller/shop"
                        value={sellerName}
                        onChange={(e) => setSellerName(e.target.value)}
                      />
                    </div>
                  </div>

                  {/* Facebook URL */}
                  <div className="space-y-2">
                    <Label htmlFor="facebookUrl" className="flex items-center gap-1.5">
                      <Facebook className="h-3.5 w-3.5 text-blue-500" />
                      Facebook Page/Profile URL
                    </Label>
                    <Input
                      id="facebookUrl"
                      placeholder="https://facebook.com/scammer.page"
                      value={facebookUrl}
                      onChange={(e) => {
                        setFacebookUrl(e.target.value);
                        if (errors.facebookUrl) setErrors((prev) => ({ ...prev, facebookUrl: undefined }));
                      }}
                      className={errors.facebookUrl ? 'border-destructive' : ''}
                    />
                    {errors.facebookUrl && (
                      <p className="text-sm text-destructive flex items-center gap-1">
                        <AlertCircle className="h-3.5 w-3.5" />
                        {errors.facebookUrl}
                      </p>
                    )}
                  </div>
                </CardContent>
              </Card>
            </motion.div>
          )}

          {/* Step 3: Financial Details */}
          {currentStep === 3 && (
            <motion.div
              key="step-3"
              custom={direction}
              variants={slideVariants}
              initial="enter"
              animate="center"
              exit="exit"
              transition={{ duration: 0.3 }}
            >
              <Card className="border-border/50">
                <CardHeader>
                  <div className="flex items-center gap-2">
                    <CreditCard className="h-5 w-5 text-red-500" />
                    <CardTitle className="text-lg">Financial Details</CardTitle>
                    <Badge variant="secondary" className="text-xs ml-auto">Step 3/5</Badge>
                  </div>
                  <CardDescription>
                    Information about money lost in the scam
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    {/* Amount Lost */}
                    <div className="space-y-2">
                      <Label htmlFor="amountLost" className="flex items-center gap-1.5">
                        <CreditCard className="h-3.5 w-3.5 text-muted-foreground" />
                        Amount Lost
                      </Label>
                      <div className="relative">
                        <span className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground font-medium">
                          ৳
                        </span>
                        <Input
                          id="amountLost"
                          type="number"
                          min="0"
                          placeholder="0"
                          value={amountLost}
                          onChange={(e) => {
                            setAmountLost(e.target.value);
                            if (errors.amountLost) setErrors((prev) => ({ ...prev, amountLost: undefined }));
                          }}
                          className={`pl-8 ${errors.amountLost ? 'border-destructive' : ''}`}
                        />
                      </div>
                      {errors.amountLost && (
                        <p className="text-sm text-destructive flex items-center gap-1">
                          <AlertCircle className="h-3.5 w-3.5" />
                          {errors.amountLost}
                        </p>
                      )}
                    </div>

                    {/* Transaction Date */}
                    <div className="space-y-2">
                      <Label htmlFor="transactionDate" className="flex items-center gap-1.5">
                        <Calendar className="h-3.5 w-3.5 text-muted-foreground" />
                        Transaction Date
                      </Label>
                      <Input
                        id="transactionDate"
                        type="date"
                        value={transactionDate}
                        onChange={(e) => setTransactionDate(e.target.value)}
                        max={new Date().toISOString().split('T')[0]}
                      />
                    </div>
                  </div>

                  {/* District */}
                  <div className="space-y-2">
                    <Label htmlFor="district" className="flex items-center gap-1.5">
                      <MapPin className="h-3.5 w-3.5 text-muted-foreground" />
                      District
                    </Label>
                    <Select value={district} onValueChange={setDistrict}>
                      <SelectTrigger className="w-full">
                        <SelectValue placeholder="Select your district" />
                      </SelectTrigger>
                      <SelectContent>
                        {BANGLADESH_DISTRICTS.map((d) => (
                          <SelectItem key={d} value={d}>
                            {d}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>

                  {/* Contact Email */}
                  <div className="space-y-2">
                    <Label htmlFor="contactEmail" className="flex items-center gap-1.5">
                      <Mail className="h-3.5 w-3.5 text-muted-foreground" />
                      Contact Email <span className="text-xs text-muted-foreground">(optional)</span>
                    </Label>
                    <Input
                      id="contactEmail"
                      type="email"
                      placeholder="your.email@example.com"
                      value={contactEmail}
                      onChange={(e) => {
                        setContactEmail(e.target.value);
                        if (errors.contactEmail) setErrors((prev) => ({ ...prev, contactEmail: undefined }));
                      }}
                      className={errors.contactEmail ? 'border-destructive' : ''}
                    />
                    {errors.contactEmail && (
                      <p className="text-sm text-destructive flex items-center gap-1">
                        <AlertCircle className="h-3.5 w-3.5" />
                        {errors.contactEmail}
                      </p>
                    )}
                    <p className="text-xs text-muted-foreground">
                      For follow-up questions about your report
                    </p>
                  </div>
                </CardContent>
              </Card>
            </motion.div>
          )}

          {/* Step 4: Evidence */}
          {currentStep === 4 && (
            <motion.div
              key="step-4"
              custom={direction}
              variants={slideVariants}
              initial="enter"
              animate="center"
              exit="exit"
              transition={{ duration: 0.3 }}
            >
              <Card className="border-border/50">
                <CardHeader>
                  <div className="flex items-center gap-2">
                    <Upload className="h-5 w-5 text-teal-500" />
                    <CardTitle className="text-lg">Evidence</CardTitle>
                    <Badge variant="secondary" className="text-xs ml-auto">Step 4/5</Badge>
                  </div>
                  <CardDescription>
                    Upload screenshots or photos as evidence (optional but recommended)
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  {/* OCR Auto-Fill Button */}
                  <div className="flex items-center gap-3 p-3 rounded-lg bg-emerald-500/5 border border-emerald-500/20">
                    <div className="p-2 rounded-lg bg-emerald-500/10">
                      <Sparkles className="h-5 w-5 text-emerald-500" />
                    </div>
                    <div className="flex-1 min-w-0">
                      <p className="text-sm font-medium">{useLangStore.getState().t('report.autoFillScreenshot')}</p>
                      <p className="text-xs text-muted-foreground mt-0.5">
                        Upload a screenshot to auto-detect scam details
                      </p>
                    </div>
                    <input
                      ref={ocrInputRef}
                      type="file"
                      accept="image/png,image/jpeg,image/jpg,image/webp"
                      onChange={handleOcrAutoFill}
                      className="hidden"
                    />
                    <Button
                      type="button"
                      size="sm"
                      variant="outline"
                      className="shrink-0 gap-1.5 border-emerald-500/30 hover:bg-emerald-500/10 hover:text-emerald-600 dark:hover:text-emerald-400"
                      onClick={() => ocrInputRef.current?.click()}
                      disabled={isOcrAnalyzing}
                    >
                      {isOcrAnalyzing ? (
                        <>
                          <Loader2 className="h-3.5 w-3.5 animate-spin" />
                          Analyzing...
                        </>
                      ) : (
                        <>
                          <Sparkles className="h-3.5 w-3.5" />
                          Auto-Fill
                        </>
                      )}
                    </Button>
                  </div>

                  {/* Drop Zone with Drag Feedback */}
                  <motion.div
                    animate={{
                      borderColor: isDragOver ? 'rgb(16, 185, 129)' : undefined,
                      backgroundColor: isDragOver ? 'rgba(16, 185, 129, 0.05)' : undefined,
                    }}
                    onDrop={handleDrop}
                    onDragOver={handleDragOver}
                    onDragLeave={handleDragLeave}
                    onClick={() => fileInputRef.current?.click()}
                    className={`relative border-2 border-dashed rounded-xl p-8 text-center cursor-pointer transition-all duration-200 ${
                      isDragOver
                        ? 'border-emerald-500 bg-emerald-500/5 scale-[1.02]'
                        : 'border-border hover:border-emerald-500/50 hover:bg-emerald-500/5'
                    }`}
                  >
                    <input
                      ref={fileInputRef}
                      type="file"
                      accept="image/png,image/jpeg,image/jpg,image/webp"
                      multiple
                      onChange={(e) => handleFileSelect(e.target.files)}
                      className="hidden"
                    />
                    <div className="flex flex-col items-center gap-3">
                      <motion.div
                        animate={isDragOver ? { scale: 1.2, y: -8 } : { scale: 1, y: 0 }}
                        transition={{ type: 'spring', stiffness: 300, damping: 20 }}
                        className="p-3 rounded-xl bg-emerald-500/10"
                      >
                        <ImagePlus className="h-8 w-8 text-emerald-500" />
                      </motion.div>
                      <div>
                        <p className="font-medium">
                          {isDragOver ? 'Drop files here!' : 'Click to upload or drag and drop'}
                        </p>
                        <p className="text-sm text-muted-foreground mt-1">
                          PNG, JPG, JPEG, or WebP (max 5MB each)
                        </p>
                      </div>
                    </div>
                    {isUploading && (
                      <div className="absolute inset-0 bg-background/50 backdrop-blur-sm rounded-xl flex items-center justify-center">
                        <Loader2 className="h-6 w-6 animate-spin text-emerald-500" />
                      </div>
                    )}
                  </motion.div>

                  {/* Preview Thumbnails */}
                  <AnimatePresence>
                    {uploadedFiles.length > 0 && (
                      <motion.div
                        initial={{ opacity: 0, height: 0 }}
                        animate={{ opacity: 1, height: 'auto' }}
                        exit={{ opacity: 0, height: 0 }}
                        className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3"
                      >
                        {uploadedFiles.map((f) => (
                          <motion.div
                            key={f.preview}
                            initial={{ opacity: 0, scale: 0.8 }}
                            animate={{ opacity: 1, scale: 1 }}
                            exit={{ opacity: 0, scale: 0.8 }}
                            className="relative group"
                          >
                            <div className="aspect-square rounded-lg overflow-hidden border border-border bg-muted">
                              <img
                                src={f.preview}
                                alt="Evidence preview"
                                className="w-full h-full object-cover"
                              />
                            </div>
                            <button
                              type="button"
                              onClick={(e) => {
                                e.stopPropagation();
                                handleRemoveFile(f.preview);
                              }}
                              className="absolute -top-2 -right-2 h-6 w-6 rounded-full bg-destructive text-destructive-foreground flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity shadow-md"
                            >
                              <X className="h-3.5 w-3.5" />
                            </button>
                            <div className="absolute bottom-1 left-1 right-1">
                              <Badge
                                variant={f.uploaded ? 'default' : 'secondary'}
                                className={`text-[10px] px-1.5 py-0 ${
                                  f.uploaded
                                    ? 'bg-emerald-500/80 text-white'
                                    : 'bg-muted-foreground/50 text-white'
                                }`}
                              >
                                {f.uploaded ? 'Uploaded' : 'Uploading...'}
                              </Badge>
                            </div>
                          </motion.div>
                        ))}
                      </motion.div>
                    )}
                  </AnimatePresence>
                </CardContent>
              </Card>
            </motion.div>
          )}

          {/* Step 5: Review & Submit */}
          {currentStep === 5 && (
            <motion.div
              key="step-5"
              custom={direction}
              variants={slideVariants}
              initial="enter"
              animate="center"
              exit="exit"
              transition={{ duration: 0.3 }}
            >
              <Card className="border-border/50">
                <CardHeader>
                  <div className="flex items-center gap-2">
                    <Eye className="h-5 w-5 text-emerald-500" />
                    <CardTitle className="text-lg">Review Your Report</CardTitle>
                    <Badge variant="secondary" className="text-xs ml-auto">Step 5/5</Badge>
                  </div>
                  <CardDescription>
                    Review all information before submitting
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  {/* Scam Details Review */}
                  <div className="space-y-3">
                    <h4 className="text-sm font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2">
                      <FileText className="h-4 w-4 text-emerald-500" />
                      Scam Details
                    </h4>
                    <div className="grid gap-2">
                      <ReviewField label="Category" value={categories.find((c) => c.slug === scamType)?.name || scamType || 'Not specified'} />
                      <ReviewField label="Title" value={title || 'Not specified'} />
                      <ReviewField label="Description" value={description ? (description.length > 200 ? description.slice(0, 200) + '...' : description) : 'Not specified'} />
                    </div>
                  </div>

                  <Separator />

                  {/* Scammer Info Review */}
                  <div className="space-y-3">
                    <h4 className="text-sm font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2">
                      <User className="h-4 w-4 text-orange-500" />
                      Scammer Information
                    </h4>
                    <div className="grid gap-2">
                      <ReviewField label="Phone" value={scammerPhone || 'Not provided'} icon={<Phone className="h-3.5 w-3.5 text-blue-500" />} />
                      <ReviewField label="bKash" value={bKashNumber || 'Not provided'} icon={<Wallet className="h-3.5 w-3.5 text-pink-500" />} />
                      <ReviewField label="Nagad" value={nagadNumber || 'Not provided'} icon={<Smartphone className="h-3.5 w-3.5 text-orange-500" />} />
                      <ReviewField label="Seller" value={sellerName || 'Not provided'} icon={<ShoppingBag className="h-3.5 w-3.5 text-purple-500" />} />
                      <ReviewField label="Facebook" value={facebookUrl || 'Not provided'} icon={<Facebook className="h-3.5 w-3.5 text-blue-500" />} />
                    </div>
                  </div>

                  <Separator />

                  {/* Financial Review */}
                  <div className="space-y-3">
                    <h4 className="text-sm font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2">
                      <CreditCard className="h-4 w-4 text-red-500" />
                      Financial Details
                    </h4>
                    <div className="grid gap-2">
                      <ReviewField label="Amount Lost" value={amountLost ? `৳${parseFloat(amountLost).toLocaleString()}` : 'Not specified'} />
                      <ReviewField label="Transaction Date" value={transactionDate || 'Not specified'} />
                      <ReviewField label="District" value={district || 'Not specified'} />
                      <ReviewField label="Contact Email" value={contactEmail || 'Not provided'} />
                    </div>
                  </div>

                  <Separator />

                  {/* Evidence Review */}
                  <div className="space-y-3">
                    <h4 className="text-sm font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2">
                      <Upload className="h-4 w-4 text-teal-500" />
                      Evidence
                    </h4>
                    {uploadedFiles.length > 0 ? (
                      <div className="flex gap-2 flex-wrap">
                        {uploadedFiles.map((f) => (
                          <div key={f.preview} className="w-16 h-16 rounded-lg overflow-hidden border border-border">
                            <img src={f.preview} alt="Evidence" className="w-full h-full object-cover" />
                          </div>
                        ))}
                        <p className="text-sm text-muted-foreground self-center">
                          {uploadedFiles.length} {uploadedFiles.length === 1 ? 'file' : 'files'} attached
                        </p>
                      </div>
                    ) : (
                      <p className="text-sm text-muted-foreground">No evidence uploaded</p>
                    )}
                  </div>

                  <Separator />

                  {/* Disclaimer */}
                  <div className="flex gap-3 p-4 rounded-lg bg-amber-500/5 border border-amber-500/20">
                    <Info className="h-5 w-5 text-amber-500 shrink-0 mt-0.5" />
                    <p className="text-sm text-muted-foreground">
                      By submitting, you confirm this report is truthful. False reports may result in
                      account suspension.
                    </p>
                  </div>
                </CardContent>
              </Card>
            </motion.div>
          )}
        </AnimatePresence>

        {/* ─── Navigation Buttons ──────────────────────────────────────────── */}
        <div className="mt-6 flex items-center justify-between gap-3">
          <Button
            variant="outline"
            onClick={goPrev}
            disabled={currentStep === 1}
            className="gap-2"
          >
            <ChevronLeft className="h-4 w-4" />
            Previous
          </Button>

          <div className="flex items-center gap-2">
            <span className="text-sm text-muted-foreground">
              Step {currentStep} of {STEPS.length}
            </span>
          </div>

          {currentStep < 5 ? (
            <Button
              onClick={goNext}
              className="gap-2 bg-emerald-600 hover:bg-emerald-700"
            >
              Next
              <ChevronRight className="h-4 w-4" />
            </Button>
          ) : (
            <motion.div whileTap={{ scale: 0.95 }}>
              <Button
                onClick={handleSubmit}
                disabled={isSubmitting || isUploading}
                className="gap-2 bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600 shadow-lg shadow-emerald-500/20 px-6"
              >
                {isSubmitting ? (
                  <>
                    <Loader2 className="h-4 w-4 animate-spin" />
                    Submitting...
                  </>
                ) : (
                  <>
                    <Sparkles className="h-4 w-4" />
                    Submit Report
                  </>
                )}
              </Button>
            </motion.div>
          )}
        </div>
      </motion.div>
    </div>
  );
}

// ─── Review Field Helper ─────────────────────────────────────────────────────

function ReviewField({ label, value, icon }: { label: string; value: string; icon?: React.ReactNode }) {
  return (
    <div className="flex items-start gap-3 py-1.5">
      <div className="flex items-center gap-1.5 min-w-[120px]">
        {icon}
        <span className="text-sm text-muted-foreground">{label}</span>
      </div>
      <span className="text-sm font-medium flex-1 break-all">{value}</span>
    </div>
  );
}
