'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import { useParams, useRouter } from 'next/navigation';
import {
  Shield, Check, Clock, Bike, User, Phone,
  MapPin, FileText, Image, DollarSign, Wrench, Battery,
  CheckCircle, XCircle, ArrowLeft, Save, Printer, Send,
  MessageSquare, Edit, UserCheck, Wallet, Store, Globe, Calendar, Briefcase, Plus, Upload, Lock
} from 'lucide-react';
import toast from 'react-hot-toast';
import { hasPermission, canApproveKycDocument, canRejectKycDocument, canMakeValidUser } from '@/lib/auth';

type ApplicationSource = 'app' | 'web' | 'walkin' | 'referral';
type KYCType = 'biker' | 'investor' | 'swapstation' | 'merchant' | 'general';
type RiderPlan = 'single_rent' | 'rent_to_own' | 'share_ev';
type VerificationStage = 'application' | 'document_collection' | 'risk_check' | 'plan_selection' | 'payment' | 'agreement' | 'allocated' | 'active';

interface Document {
  id: string;
  name: string;
  status: 'pending' | 'uploaded' | 'approved' | 'rejected';
  imageUrl?: string;
  rejectedReason?: string;
  uploadedAt?: string;
}

interface InvestmentPlan {
  planName: string;
  planType: string;
  bikes: number;
  amount: number;
  monthlyReturn: number;
  expectedROI: number;
}

interface SwapStationPlan {
  planType: string;
  cabinets: number;
  amount: number;
  batteries: number;
  monthlyRent: number;
}

interface MerchantPlan {
  companyCategory: string;
  bikersRequested: number;
  amount: number;
  monthlyBudget: number;
  requiredArea: string;
}

interface SmsHistory {
  id: string;
  message: string;
  sentAt: string;
  sentBy: string;
}

interface Request {
  id: string;
  applicationSource: ApplicationSource;
  sourceDetails?: string;
  hubId?: string;
  name: string;
  phone: string;
  email: string;
  type: KYCType;
  status: 'pending' | 'documents_needed' | 'under_review' | 'risk_check' | 'approved' | 'rejected';
  verificationStage: VerificationStage;
  submittedAt: string;
  location: string;
  address: string;
  requiredDocuments: Document[];
  riderPlan?: RiderPlan;
  nomineeDetails?: { name: string; phone: string; relationship: string; nid: string };
  employmentInfo?: { company: string; dailyEarning: number; whyEV: string; experience: string };
  investmentPlan?: InvestmentPlan;
  swapStationPlan?: SwapStationPlan;
  merchantPlan?: MerchantPlan;
  riskCheck?: { nidVerified: boolean; nomineeNidVerified: boolean; deliveryPlatformStatus: string; paymentReliability: string; notes: string };
  agreement?: { dailyRentObligation: number; latePenalty: number; signedAt?: string };
  evAllocation?: { evId: string; bikeModel: string; batteryId: string; hubLocation: string; gpsActivated: boolean };
  securityDeposit?: number;
  advancePayment?: number;
  paymentMethod?: 'bank' | 'wallet' | 'cash';
  bikeRequested?: string;
  scheduleDate?: string;
  notes: string[];
  smsHistory?: SmsHistory[];
}

const mockRequests: Request[] = [
  {
    id: 'REQ001',
    applicationSource: 'app',
    name: 'Rahim Ahmed',
    phone: '01712345678',
    email: 'rahim@email.com',
    type: 'biker',
    status: 'pending',
    verificationStage: 'application',
    submittedAt: '2024-03-20',
    location: 'Gulshan, Dhaka',
    address: 'House 12, Road 5, Gulshan 1',
    requiredDocuments: [
      { id: 'd1', name: 'NID Front', status: 'uploaded', uploadedAt: '2024-03-20' },
      { id: 'd2', name: 'NID Back', status: 'uploaded', uploadedAt: '2024-03-20' },
      { id: 'd3', name: 'Driving License', status: 'pending' },
      { id: 'd4', name: 'Profile Photo', status: 'uploaded', uploadedAt: '2024-03-20' },
    ],
    riderPlan: 'single_rent',
    employmentInfo: { company: 'Foodpanda', dailyEarning: 2500, whyEV: 'Low maintenance, good for delivery', experience: '3 years bike riding' },
    nomineeDetails: { name: 'Fatema', phone: '01712345699', relationship: 'Wife', nid: '1234567890123' },
    securityDeposit: 5000,
    advancePayment: 500,
    bikeRequested: 'AIMA Lightning',
    notes: ['Downloaded app and applied through mobile'],
    smsHistory: [
      { id: 'sms1', message: 'Your KYC application is under review', sentAt: '2024-03-21', sentBy: 'admin' },
    ],
  },
  {
    id: 'REQ002',
    applicationSource: 'walkin',
    hubId: 'hub2',
    name: 'Karim Hasan',
    phone: '01712345679',
    email: 'karim@email.com',
    type: 'investor',
    status: 'documents_needed',
    verificationStage: 'document_collection',
    submittedAt: '2024-03-19',
    location: 'Banani, Dhaka',
    address: 'Flat 3B, House 22, Banani',
    requiredDocuments: [
      { id: 'd5', name: 'NID', status: 'uploaded', uploadedAt: '2024-03-19' },
      { id: 'd6', name: 'TIN Certificate', status: 'pending' },
      { id: 'd7', name: 'Bank Statement', status: 'pending' },
    ],
    notes: ['Walked in at Gulshan office - referred by current biker'],
    smsHistory: [],
    investmentPlan: { planName: 'Gold Plan', planType: 'Gold', bikes: 5, amount: 2500000, monthlyReturn: 8, expectedROI: 96 },
    nomineeDetails: { name: 'John Doe', phone: '01712345690', relationship: 'Brother', nid: '1234567890124' },
  },
  {
    id: 'REQ003',
    applicationSource: 'web',
    hubId: 'hub1',
    name: 'Dhaka Swap Station',
    phone: '01712345680',
    email: 'dhakaswap@email.com',
    type: 'swapstation',
    status: 'under_review',
    verificationStage: 'document_collection',
    submittedAt: '2024-03-18',
    location: 'Gulshan, Dhaka',
    address: 'Plot 45, Road 11, Gulshan 1',
    requiredDocuments: [
      { id: 'd8', name: 'Trade License', status: 'uploaded', uploadedAt: '2024-03-18' },
      { id: 'd9', name: 'Owner NID', status: 'uploaded', uploadedAt: '2024-03-18' },
      { id: 'd10', name: 'Station Photos', status: 'pending' },
      { id: 'd11', name: 'Electricity Bill', status: 'pending' },
    ],
    employmentInfo: { company: 'Dhaka Swap Station', dailyEarning: 0, whyEV: 'https://maps.google.com/...', experience: 'Battery swap station' },
    swapStationPlan: { planType: 'Premium', cabinets: 12, amount: 1800000, batteries: 24, monthlyRent: 45000 },
    nomineeDetails: { name: 'Mahbub', phone: '01712345691', relationship: 'Brother', nid: '1234567890125' },
    notes: ['Located in commercial area'],
    smsHistory: [],
  },
  {
    id: 'REQ004',
    applicationSource: 'app',
    hubId: 'hub3',
    name: 'Foodpanda Bangladesh',
    phone: '01712345681',
    email: 'bd@foodpanda.com',
    type: 'merchant',
    status: 'pending',
    verificationStage: 'application',
    submittedAt: '2024-03-21',
    location: 'Dhaka',
    address: 'House 12, Gulshan Avenue',
    requiredDocuments: [
      { id: 'd12', name: 'Trade License', status: 'pending' },
      { id: 'd13', name: 'Company NID', status: 'pending' },
      { id: 'd14', name: 'Company Documents', status: 'pending' },
    ],
    employmentInfo: { company: 'Foodpanda Bangladesh', dailyEarning: 5000000, whyEV: 'Food Delivery', experience: 'Leading food delivery platform' },
    merchantPlan: { companyCategory: 'Food Delivery', bikersRequested: 100, amount: 5000000, monthlyBudget: 10000000, requiredArea: 'Dhaka' },
    nomineeDetails: { name: 'Admin User', phone: '01712345692', relationship: 'Office', nid: '1234567890126' },
    notes: ['Request for 100 riders'],
    smsHistory: [],
  },
];

const statusColors: Record<string, string> = {
  pending: 'bg-amber-100 text-amber-700',
  documents_needed: 'bg-orange-100 text-orange-700',
  under_review: 'bg-blue-100 text-blue-700',
  risk_check: 'bg-purple-100 text-purple-700',
  approved: 'bg-green-100 text-green-700',
  rejected: 'bg-red-100 text-red-700',
};

const stageLabels: Record<string, string> = {
  application: 'Application',
  document_collection: 'Documents',
  risk_check: 'Risk Check',
  plan_selection: 'Plan Selection',
  payment: 'Payment',
  agreement: 'Agreement',
  allocated: 'EV Allocated',
  active: 'Active',
};

const sourceLabels: Record<string, string> = {
  app: 'Mobile App',
  web: 'Website',
  walkin: 'Walk-in',
  referral: 'Referral',
};

const hubLabels: Record<string, string> = {
  hub1: 'Gulshan Hub',
  hub2: 'Banani Hub',
  hub3: 'Dhanmondi Hub',
  hub4: 'Mirpur Hub',
  hub5: 'Uttara Hub',
};

const planLabels: Record<string, string> = {
  daily_rent: 'Daily Rent',
  weekly_rent: 'Weekly Rent',
  monthly_rent: 'Monthly Rent',
  rent_to_own: 'Rent-to-Own',
  share_ev: 'Share EV',
};

const typeIcons: Record<string, any> = {
  biker: Bike,
  investor: DollarSign,
  swapstation: Store,
  merchant: User,
};

export default function KYCDetailPage() {
  const params = useParams();
  const router = useRouter();
  const id = params.id as string;

  const [request, setRequest] = useState<Request | null>(null);
  const [editMode, setEditMode] = useState(false);
  const [editForm, setEditForm] = useState<Partial<Request>>({});
  const [showMessageModal, setShowMessageModal] = useState(false);
  const [showAddNoteModal, setShowAddNoteModal] = useState(false);
  const [showApproveModal, setShowApproveModal] = useState(false);
  const [newNoteText, setNewNoteText] = useState('');
  const [newMessageText, setNewMessageText] = useState('');
  const [showAddDocModal, setShowAddDocModal] = useState(false);
  const [newDocName, setNewDocName] = useState('');
  const [showUploadDocModal, setShowUploadDocModal] = useState(false);

  const [showRejectDocModal, setShowRejectDocModal] = useState(false);
  const [rejectDocId, setRejectDocId] = useState<string | null>(null);
  const [rejectReason, setRejectReason] = useState('');
  const [uploadDocId, setUploadDocId] = useState<string | null>(null);

  const [permApprove, setPermApprove] = useState(false);
  const [permReject, setPermReject] = useState(false);
  const [permMakeValid, setPermMakeValid] = useState(false);
  const [permDocUpload, setPermDocUpload] = useState(false);

  useEffect(() => {
    setPermApprove(canApproveKycDocument());
    setPermReject(canRejectKycDocument());
    setPermMakeValid(canMakeValidUser());
    setPermDocUpload(hasPermission('kyc.doc_upload'));
  }, []);

  useEffect(() => {
    const found = mockRequests.find(r => r.id === id);
    if (found) {
      setRequest(found);
      setEditForm(found);
    }
  }, [id]);

  if (!request) {
    return (
      <div className="p-6 flex items-center justify-center min-h-[50vh]">
        <div className="text-center">
          <Shield className="w-16 h-16 text-slate-300 mx-auto mb-4" />
          <p className="text-slate-500">Request not found</p>
          <button
            onClick={() => router.push('/admin/kyc')}
            className="mt-4 px-4 py-2 bg-accent text-white rounded-lg text-sm"
          >
            Back to KYC
          </button>
        </div>
      </div>
    );
  }

  const handleSaveEdit = () => {
    setRequest(prev => prev ? { ...prev, ...editForm } : null);
    setEditMode(false);
  };

  const handleAddNote = () => {
    if (!request || !newNoteText.trim()) return;
    setRequest(prev => prev ? { ...prev, notes: [...prev.notes, newNoteText] } : null);
    setNewNoteText('');
    setShowAddNoteModal(false);
  };

  const handleSendMessage = () => {
    if (!request || !newMessageText.trim()) return;
    setRequest(prev => prev ? {
      ...prev,
      status: 'documents_needed' as const,
      smsHistory: [
        ...(prev.smsHistory || []),
        { id: `sms-${Date.now()}`, message: newMessageText, sentAt: new Date().toISOString(), sentBy: 'admin' }
      ]
    } : null);
    setNewMessageText('');
    setShowMessageModal(false);
    toast.success(`SMS sent to ${request.phone}`);
  };

  const handleAddDocument = () => {
    if (!request || !newDocName.trim()) return;
    setRequest(prev => prev ? {
      ...prev,
      requiredDocuments: [...prev.requiredDocuments, { id: `doc-${Date.now()}`, name: newDocName, status: 'pending' as const }]
    } : null);
    setNewDocName('');
    setShowAddDocModal(false);
  };

  const handleApproveDocument = (docId: string) => {
    if (!request) return;
    setRequest(prev => prev ? {
      ...prev,
      requiredDocuments: prev.requiredDocuments.map(doc =>
        doc.id === docId ? { ...doc, status: 'approved' as const } : doc
      )
    } : null);
  };

  const openRejectDocModal = (docId: string) => {
    setRejectDocId(docId);
    setRejectReason('');
    setShowRejectDocModal(true);
  };

  const handleRejectDocument = () => {
    if (!request || !rejectDocId || !rejectReason.trim()) return;
    setRequest(prev => prev ? {
      ...prev,
      requiredDocuments: prev.requiredDocuments.map(doc =>
        doc.id === rejectDocId ? { ...doc, status: 'rejected' as const, rejectedReason: rejectReason } : doc
      )
    } : null);
    setShowRejectDocModal(false);
    setRejectDocId(null);
    setRejectReason('');
    toast.success('Document rejected');
  };

  const handleUploadDocument = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file || !uploadDocId || !request) return;
    const imageUrl = URL.createObjectURL(file);
    setRequest(prev => prev ? {
      ...prev,
      requiredDocuments: prev.requiredDocuments.map(doc =>
        doc.id === uploadDocId ? { ...doc, status: 'uploaded' as const, imageUrl, uploadedAt: new Date().toISOString() } : doc
      )
    } : null);
    setShowUploadDocModal(false);
  };

  const openUploadModal = (docId: string) => {
    setUploadDocId(docId);
    setShowUploadDocModal(true);
  };

  const TypeIcon = typeIcons[request.type];

  const smsTemplates = [
    { id: 'docs', label: 'Documents Required', message: 'Please upload your required documents to proceed with your KYC application.' },
    { id: 'review', label: 'Under Review', message: 'Your KYC application is now under review. We will notify you once the process is completed.' },
    { id: 'approval', label: 'Pending Approval', message: 'Your application is pending final approval. You will be notified once approved.' },
  ];

  return (
    <div className="p-4 lg:p-6 max-w-8xl mx-auto">
      <button
        onClick={() => router.push('/admin/kyc')}
        className="flex items-center gap-2 text-slate-600 hover:text-slate-800 mb-4"
      >
        <ArrowLeft className="w-4 h-4" /> Back to KYC
      </button>

      <div className="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden">
        <div className="p-6 border-b border-slate-100">
          <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4">
            <div>
              <div className="flex items-center gap-3">
                <h1 className="text-2xl font-extrabold text-slate-800">{request.id}</h1>
                <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${statusColors[request.status]}`}>
                  {request.status.replace('_', ' ')}
                </span>
                {request.type === 'biker' && request.verificationStage && (
                  <span className="inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full bg-cyan-100 text-cyan-700">
                    {stageLabels[request.verificationStage]}
                  </span>
                )}
              </div>
              <p className="text-slate-500 mt-1">{request.name} • {request.submittedAt}</p>
            </div>

            <div className="flex flex-col sm:flex-row sm:flex-wrap gap-2">
              {editMode ? (
                <>
                  <button onClick={handleSaveEdit} className="flex-1 sm:flex-none px-3 sm:px-4 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700 flex items-center justify-center gap-2">
                    <Save className="w-4 h-4" /> <span>Save</span>
                  </button>
                  <button onClick={() => { setEditForm(request); setEditMode(false); }} className="flex-1 sm:flex-none px-3 sm:px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50">
                    Cancel
                  </button>
                </>
              ) : (
                <>
                  {/* Top Row on Mobile: Make [Type] Button */}
                  <div className="flex gap-2 w-full sm:w-auto">
                    {permMakeValid && request.type === 'biker' && request.status !== 'approved' && (
                      <button
                        onClick={() => setShowApproveModal(true)}
                        className="flex-1 sm:flex-none px-3 sm:px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700 flex items-center justify-center gap-2"
                      >
                        <Bike className="w-4 h-4" /> <span>Make Biker</span>
                      </button>
                    )}
                    {permMakeValid && request.type === 'investor' && request.status !== 'approved' && (
                      <button
                        onClick={() => {
                          if (confirm('Approve this request and create investor profile?')) {
                            setRequest(prev => prev ? { ...prev, status: 'approved' } : null);
                            alert('Investor created successfully!');
                          }
                        }}
                        className="flex-1 sm:flex-none px-3 sm:px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700 flex items-center justify-center gap-2"
                      >
                        <DollarSign className="w-4 h-4" /> <span>Make Investor</span>
                      </button>
                    )}
                    {permMakeValid && request.type === 'swapstation' && request.status !== 'approved' && (
                      <button
                        onClick={() => {
                          if (confirm('Approve this request and create shop profile?')) {
                            setRequest(prev => prev ? { ...prev, status: 'approved' } : null);
                            alert('Shop created successfully!');
                          }
                        }}
                        className="flex-1 sm:flex-none px-3 sm:px-4 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700 flex items-center justify-center gap-2"
                      >
                        <Store className="w-4 h-4" /> <span>Make Shop</span>
                      </button>
                    )}
                    {permMakeValid && request.type === 'merchant' && request.status !== 'approved' && (
                      <button
                        onClick={() => {
                          if (confirm('Approve this request and create merchant profile?')) {
                            setRequest(prev => prev ? { ...prev, status: 'approved' } : null);
                            alert('Merchant created successfully!');
                          }
                        }}
                        className="flex-1 sm:flex-none px-3 sm:px-4 py-2 bg-orange-600 text-white rounded-lg text-sm hover:bg-orange-700 flex items-center justify-center gap-2"
                      >
                        <User className="w-4 h-4" /> <span>Make Merchant</span>
                      </button>
                    )}
                    {!permMakeValid && (
                      <div className="flex items-center gap-1.5 px-3 sm:px-4 py-2 bg-slate-100 text-slate-400 rounded-lg text-xs">
                        <Lock className="w-3 h-3" /> <span>Make Valid User</span>
                      </div>
                    )}
                  </div>

                  {/* Bottom Row on Mobile: Edit, Note, SMS */}
                  <div className="flex gap-2 w-full sm:w-auto">
                    <button onClick={() => setEditMode(true)} className="flex-1 sm:flex-none px-3 sm:px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50 flex items-center justify-center gap-2">
                      <Edit className="w-4 h-4" /> <span>Edit</span>
                    </button>
                    <button onClick={() => setShowAddNoteModal(true)} className="flex-1 sm:flex-none px-3 sm:px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50 flex items-center justify-center gap-2">
                      <MessageSquare className="w-4 h-4" /> <span>Note</span>
                    </button>
                    <button onClick={() => setShowMessageModal(true)} className="flex-1 sm:flex-none px-3 sm:px-4 py-2 bg-accent text-white rounded-lg text-sm hover:bg-accent/90 flex items-center justify-center gap-2">
                      <Send className="w-4 h-4" /> <span>SMS</span>
                    </button>
                  </div>
                </>
              )}
            </div>

          </div>
        </div>

        <div className="p-6 grid grid-cols-1 lg:grid-cols-2 gap-6">
          <div className="space-y-4">
            <div className="bg-blue-50 p-4 rounded-xl border border-blue-100">
              <h3 className="font-semibold text-blue-800 mb-3 flex items-center gap-2">
                <User className="w-5 h-5" /> Personal Info
              </h3>
              {editMode ? (
                <div className="space-y-3">
                  <input
                    type="text"
                    value={editForm.name || ''}
                    onChange={(e) => setEditForm({ ...editForm, name: e.target.value })}
                    placeholder="Full Name"
                    className="w-full px-3 py-2 border border-blue-200 rounded-lg text-sm"
                  />
                  <input
                    type="text"
                    value={editForm.phone || ''}
                    onChange={(e) => setEditForm({ ...editForm, phone: e.target.value })}
                    placeholder="Phone"
                    className="w-full px-3 py-2 border border-blue-200 rounded-lg text-sm"
                  />
                  <input
                    type="email"
                    value={editForm.email || ''}
                    onChange={(e) => setEditForm({ ...editForm, email: e.target.value })}
                    placeholder="Email"
                    className="w-full px-3 py-2 border border-blue-200 rounded-lg text-sm"
                  />
                  <input
                    type="text"
                    value={editForm.location || ''}
                    onChange={(e) => setEditForm({ ...editForm, location: e.target.value })}
                    placeholder="Location"
                    className="w-full px-3 py-2 border border-blue-200 rounded-lg text-sm"
                  />
                </div>
              ) : (
                <div className="space-y-2">
                  <div className="flex justify-between"><span className="text-sm text-blue-600">Name</span><span className="text-sm font-medium text-blue-800">{request.name}</span></div>
                  <div className="flex justify-between"><span className="text-sm text-blue-600">Phone</span><span className="text-sm font-medium text-blue-800">{request.phone}</span></div>
                  <div className="flex justify-between"><span className="text-sm text-blue-600">Email</span><span className="text-sm font-medium text-blue-800">{request.email || '-'}</span></div>
                  <div className="flex justify-between"><span className="text-sm text-blue-600">Location</span><span className="text-sm font-medium text-blue-800">{request.location}</span></div>
                </div>
              )}
            </div>

            <div className="bg-green-50 p-4 rounded-xl border border-green-100">
              <h3 className="font-semibold text-green-800 mb-3 flex items-center gap-2">
                <Globe className="w-5 h-5" /> Source
              </h3>
              <div className="space-y-2">
                <div className="flex justify-between"><span className="text-sm text-green-600">Source</span><span className="text-sm font-medium text-green-800">{sourceLabels[request.applicationSource]}</span></div>
                {request.hubId ? (
                  <div className="flex justify-between">
                    <span className="text-sm text-green-600">Hub</span>
                    <Link href={`/admin/hub/${request.hubId}`} className="text-sm font-medium text-blue-600 hover:text-blue-800 flex items-center gap-1">
                      <MapPin className="w-3 h-3" /> {hubLabels[request.hubId]}
                    </Link>
                  </div>
                ) : request.sourceDetails && (
                  <div className="flex justify-between"><span className="text-sm text-green-600">Details</span><span className="text-sm font-medium text-green-800">{request.sourceDetails}</span></div>
                )}
                <div className="flex justify-between"><span className="text-sm text-green-600">Type</span><span className="text-sm font-medium text-green-800 capitalize flex items-center gap-1"><TypeIcon className="w-4 h-4" /> {request.type}</span></div>
              </div>
            </div>

            {request.type === 'biker' && (
              <div className="bg-purple-50 p-4 rounded-xl border border-purple-100">
                <h3 className="font-semibold text-purple-800 mb-3 flex items-center gap-2">
                  <Calendar className="w-5 h-5" /> Plan Selection
                </h3>
                {editMode ? (
                  <div className="space-y-3">
                    <select
                      value={editForm.riderPlan || ''}
                      onChange={(e) => setEditForm({ ...editForm, riderPlan: e.target.value as RiderPlan })}
                      className="w-full px-3 py-2 border border-purple-200 rounded-lg text-sm"
                    >
                      <option value="">Select Plan</option>
                      <option value="daily_rent">Daily Rent</option>
                      <option value="weekly_rent">Weekly Rent</option>
                      <option value="monthly_rent">Monthly Rent</option>
                      <option value="rent_to_own">Rent-to-Own</option>
                      <option value="share_ev">Share EV</option>
                    </select>
                    <input
                      type="text"
                      value={editForm.bikeRequested || ''}
                      onChange={(e) => setEditForm({ ...editForm, bikeRequested: e.target.value })}
                      placeholder="Bike Model"
                      className="w-full px-3 py-2 border border-purple-200 rounded-lg text-sm"
                    />
                  </div>
                ) : (
                  <div className="space-y-2">
                    <div className="flex justify-between"><span className="text-sm text-purple-600">Plan</span><span className="text-sm font-medium text-purple-800">{request.riderPlan ? planLabels[request.riderPlan] : '-'}</span></div>
                    <div className="flex justify-between"><span className="text-sm text-purple-600">Bike</span><span className="text-sm font-medium text-purple-800">{request.bikeRequested || '-'}</span></div>
                    {request.scheduleDate && <div className="flex justify-between"><span className="text-sm text-purple-600">Schedule</span><span className="text-sm font-medium text-purple-800">{request.scheduleDate}</span></div>}
                  </div>
                )}
              </div>
            )}

            {request.type === 'biker' && request.nomineeDetails && (
              <div className="bg-pink-50 p-4 rounded-xl border border-pink-100">
                <h3 className="font-semibold text-pink-800 mb-3 flex items-center gap-2">
                  <User className="w-5 h-5" /> Nominee Details
                </h3>
                {editMode ? (
                  <div className="space-y-3">
                    <input
                      type="text"
                      value={editForm.nomineeDetails?.name || ''}
                      onChange={(e) => setEditForm({ ...editForm, nomineeDetails: { ...editForm.nomineeDetails!, name: e.target.value } })}
                      placeholder="Nominee Name"
                      className="w-full px-3 py-2 border border-pink-200 rounded-lg text-sm"
                    />
                    <input
                      type="text"
                      value={editForm.nomineeDetails?.phone || ''}
                      onChange={(e) => setEditForm({ ...editForm, nomineeDetails: { ...editForm.nomineeDetails!, phone: e.target.value } })}
                      placeholder="Phone"
                      className="w-full px-3 py-2 border border-pink-200 rounded-lg text-sm"
                    />
                    <input
                      type="text"
                      value={editForm.nomineeDetails?.relationship || ''}
                      onChange={(e) => setEditForm({ ...editForm, nomineeDetails: { ...editForm.nomineeDetails!, relationship: e.target.value } })}
                      placeholder="Relationship"
                      className="w-full px-3 py-2 border border-pink-200 rounded-lg text-sm"
                    />
                  </div>
                ) : (
                  <div className="space-y-2">
                    <div className="flex justify-between"><span className="text-sm text-pink-600">Name</span><span className="text-sm font-medium text-pink-800">{request.nomineeDetails.name}</span></div>
                    <div className="flex justify-between"><span className="text-sm text-pink-600">Phone</span><span className="text-sm font-medium text-pink-800">{request.nomineeDetails.phone}</span></div>
                    <div className="flex justify-between"><span className="text-sm text-pink-600">Relationship</span><span className="text-sm font-medium text-pink-800">{request.nomineeDetails.relationship}</span></div>
                    <div className="flex justify-between"><span className="text-sm text-pink-600">NID</span><span className="text-sm font-medium text-pink-800">{request.nomineeDetails.nid}</span></div>
                  </div>
                )}
              </div>
            )}
          </div>

          <div className="space-y-4">
            <div className="bg-amber-50 p-4 rounded-xl border border-amber-100">
              <div className="flex items-center justify-between mb-3">
                <h3 className="font-semibold text-amber-800 flex items-center gap-2">
                  <FileText className="w-5 h-5" /> Documents ({request.requiredDocuments.length})
                </h3>
                <button
                  onClick={() => setShowAddDocModal(true)}
                  className="text-xs px-2 py-1 bg-white rounded border border-amber-200 text-amber-700 hover:bg-amber-100 flex items-center gap-1"
                >
                  <Plus className="w-3 h-3" /> Add
                </button>
              </div>
              <div className="space-y-2">
                {request.requiredDocuments.map((doc) => (
                  <div key={doc.id} className="flex items-center justify-between p-2 bg-white rounded-lg">
                    <div className="flex items-center gap-2">
                      {doc.status === 'pending' && <Clock className="w-4 h-4 text-amber-400" />}
                      {doc.status === 'uploaded' && <FileText className="w-4 h-4 text-blue-400" />}
                      {doc.status === 'approved' && <CheckCircle className="w-4 h-4 text-green-500" />}
                      {doc.status === 'rejected' && <XCircle className="w-4 h-4 text-red-500" />}
                      <span className="text-sm text-slate-700">{doc.name}</span>
                    </div>
                    <div className="flex items-center gap-1">
                      {doc.status === 'pending' && (
                        <>
                          {permDocUpload ? (
                            <button onClick={() => openUploadModal(doc.id)} className="p-1 bg-amber-100 text-amber-600 rounded hover:bg-amber-200" title="Upload"><Upload className="w-4 h-4" /></button>
                          ) : (
                            <span className="p-1 bg-amber-50 text-amber-300 rounded cursor-not-allowed" title="No permission"><Upload className="w-4 h-4" /></span>
                          )}
                        </>
                      )}
                      {(doc.status === 'uploaded' || doc.status === 'approved') && doc.imageUrl && (
                        <button onClick={() => window.open(doc.imageUrl, '_blank')} className="p-1 bg-blue-100 text-blue-600 rounded hover:bg-blue-200" title="View"><Image className="w-4 h-4" /></button>
                      )}
                      {doc.status === 'uploaded' && (
                        <>
                          {permApprove ? (
                            <button onClick={() => handleApproveDocument(doc.id)} className="p-1 bg-green-100 text-green-600 rounded hover:bg-green-200" title="Approve"><CheckCircle className="w-4 h-4" /></button>
                          ) : (
                            <span className="p-1 bg-green-50 text-green-300 rounded cursor-not-allowed" title="No permission"><CheckCircle className="w-4 h-4" /></span>
                          )}
                          {permReject ? (
                            <button onClick={() => openRejectDocModal(doc.id)} className="p-1 bg-red-100 text-red-600 rounded hover:bg-red-200" title="Reject"><XCircle className="w-4 h-4" /></button>
                          ) : (
                            <span className="p-1 bg-red-50 text-red-300 rounded cursor-not-allowed" title="No permission"><XCircle className="w-4 h-4" /></span>
                          )}
                        </>
                      )}
                      {doc.status === 'approved' && <span className="text-xs px-2 py-1 bg-green-100 text-green-700 rounded-full">Approved</span>}
                      {doc.status === 'rejected' && <span className="text-xs px-2 py-1 bg-red-100 text-red-700 rounded-full">Rejected</span>}
                      {doc.status === 'rejected' && doc.rejectedReason && (
                        <div className="text-xs text-red-600 mt-1 italic">Reason: {doc.rejectedReason}</div>
                      )}
                      {doc.status === 'pending' && <span className="text-xs px-2 py-1 bg-amber-100 text-amber-700 rounded-full">Pending</span>}
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {request.type === 'biker' && request.employmentInfo && (
              <div className="bg-slate-50 p-4 rounded-xl border border-slate-100">
                <h3 className="font-semibold text-slate-800 mb-3 flex items-center gap-2">
                  <Briefcase className="w-5 h-5" /> Employment
                </h3>
                <div className="space-y-2">
                  <div className="flex justify-between"><span className="text-sm text-slate-600">Company</span><span className="text-sm font-medium text-slate-800">{request.employmentInfo.company}</span></div>
                  <div className="flex justify-between"><span className="text-sm text-slate-600">Daily Earning</span><span className="text-sm font-medium text-slate-800">৳{request.employmentInfo.dailyEarning}</span></div>
                  <div className="flex justify-between"><span className="text-sm text-slate-600">Experience</span><span className="text-sm font-medium text-slate-800">{request.employmentInfo.experience}</span></div>
                </div>
              </div>
            )}

            <div className="bg-slate-50 p-4 rounded-xl border border-slate-100">
              <h3 className="font-semibold text-slate-800 mb-3 flex items-center gap-2">
                <MessageSquare className="w-5 h-5" /> Notes ({request.notes.length})
              </h3>
              {request.notes.length > 0 ? (
                <div className="space-y-2">
                  {request.notes.map((note, idx) => (
                    <div key={idx} className="text-sm text-slate-600 p-2 bg-white rounded-lg">• {note}</div>
                  ))}
                </div>
              ) : (
                <p className="text-sm text-slate-400">No notes yet</p>
              )}
            </div>

            <div className="bg-slate-50 p-4 rounded-xl border border-slate-100">
              <h3 className="font-semibold text-slate-800 mb-3 flex items-center gap-2">
                <MessageSquare className="w-5 h-5" /> SMS History ({(request.smsHistory || []).length})
              </h3>
              {(request.smsHistory || []).length > 0 ? (
                <div className="space-y-2">
                  {(request.smsHistory || []).slice().reverse().map((sms) => (
                    <div key={sms.id} className={`p-2 rounded-lg ${sms.sentBy === 'admin' ? 'bg-blue-50' : 'bg-green-50'}`}>
                      <div className="flex items-center justify-between mb-1">
                        <span className={`text-xs font-medium ${sms.sentBy === 'admin' ? 'text-blue-600' : 'text-green-600'}`}>
                          {sms.sentBy === 'admin' ? 'Admin' : 'User'}
                        </span>
                        <span className="text-xs text-slate-400">{sms.sentAt}</span>
                      </div>
                      <p className="text-sm text-slate-700">{sms.message}</p>
                    </div>
                  ))}
                </div>
              ) : (
                <p className="text-sm text-slate-400">No SMS history yet</p>
              )}
            </div>
          </div>
        </div>
      </div>

      {showMessageModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-xl shadow-xl w-full max-w-md">
            <div className="p-4 border-b border-slate-100 flex justify-between items-center">
              <h3 className="font-semibold text-slate-800">SMS to {request.phone}</h3>
              <button onClick={() => setShowMessageModal(false)} className="text-slate-400 hover:text-slate-600">×</button>
            </div>
            <div className="p-4">
              <label className="text-sm font-medium text-slate-600 mb-2 block">Quick Messages</label>
              <div className="flex flex-wrap gap-2 mb-4">
                {smsTemplates.map(tmpl => (
                  <button
                    key={tmpl.id}
                    onClick={() => setNewMessageText(tmpl.message)}
                    className="px-3 py-1.5 bg-slate-100 text-slate-600 text-xs rounded-lg hover:bg-slate-200"
                  >
                    {tmpl.label}
                  </button>
                ))}
              </div>
              <textarea
                value={newMessageText}
                onChange={(e) => setNewMessageText(e.target.value)}
                className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
                rows={4}
                placeholder="Type message to send to user..."
              />
            </div>
            <div className="p-4 border-t border-slate-100 flex justify-end gap-2">
              <button onClick={() => setShowMessageModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg">Cancel</button>
              <button onClick={handleSendMessage} disabled={!newMessageText.trim()} className="px-4 py-2 bg-accent text-white rounded-lg disabled:opacity-50">Send</button>
            </div>
          </div>
        </div>
      )}

      {showApproveModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-xl shadow-xl w-full max-w-md">
            <div className="p-4 border-b border-slate-100 flex justify-between items-center">
              <h3 className="font-semibold text-slate-800">Approve Request</h3>
              <button onClick={() => setShowApproveModal(false)} className="text-slate-400 hover:text-slate-600">×</button>
            </div>
            <div className="p-4">
              <p className="text-sm text-slate-700 mb-4">Approve this request and create biker profile?</p>
              <div className="flex justify-end gap-2">
                <button onClick={() => setShowApproveModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg">Cancel</button>
                <button onClick={() => {
                  setRequest(prev => prev ? { ...prev, status: 'approved', verificationStage: 'active' } : null);
                  setShowApproveModal(false);
                  toast.success('Biker created successfully!');
                }} className="px-4 py-2 bg-blue-600 text-white rounded-lg">Confirm</button>
              </div>
            </div>
          </div>
        </div>
      )}
      {showAddNoteModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-xl shadow-xl w-full max-w-md">
            <div className="p-4 border-b border-slate-100 flex justify-between items-center">
              <h3 className="font-semibold text-slate-800">Add Note</h3>
              <button onClick={() => setShowAddNoteModal(false)} className="text-slate-400 hover:text-slate-600">×</button>
            </div>
            <div className="p-4">
              <textarea
                value={newNoteText}
                onChange={(e) => setNewNoteText(e.target.value)}
                className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
                rows={4}
                placeholder="Enter note..."
              />
            </div>
            <div className="p-4 border-t border-slate-100 flex justify-end gap-2">
              <button onClick={() => setShowAddNoteModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg">Cancel</button>
              <button onClick={handleAddNote} disabled={!newNoteText.trim()} className="px-4 py-2 bg-accent text-white rounded-lg disabled:opacity-50">Save</button>
            </div>
          </div>
        </div>
      )}

      {showAddDocModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-xl shadow-xl w-full max-w-md">
            <div className="p-4 border-b border-slate-100 flex justify-between items-center">
              <h3 className="font-semibold text-slate-800">Request New Document</h3>
              <button onClick={() => setShowAddDocModal(false)} className="text-slate-400 hover:text-slate-600">×</button>
            </div>
            <div className="p-4">
              <input
                type="text"
                value={newDocName}
                onChange={(e) => setNewDocName(e.target.value)}
                className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
                placeholder="Document name..."
              />
            </div>
            <div className="p-4 border-t border-slate-100 flex justify-end gap-2">
              <button onClick={() => setShowAddDocModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg">Cancel</button>
              <button onClick={handleAddDocument} disabled={!newDocName.trim()} className="px-4 py-2 bg-accent text-white rounded-lg disabled:opacity-50">Add Document</button>
            </div>
          </div>
        </div>
      )}

      {showUploadDocModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-xl shadow-xl w-full max-w-md">
            <div className="p-4 border-b border-slate-100 flex justify-between items-center">
              <h3 className="font-semibold text-slate-800">Upload Document</h3>
              <button onClick={() => setShowUploadDocModal(false)} className="text-slate-400 hover:text-slate-600">×</button>
            </div>
            <div className="p-4">
              <input
                type="file"
                accept="image/*,.pdf"
                onChange={handleUploadDocument}
                className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm file:mr-4 file:px-4 file:py-2 file:bg-accent file:text-white file:rounded-lg file:border-0 cursor-pointer"
              />
              <p className="text-xs text-slate-500 mt-2">Supported: JPG, PNG, PDF</p>
            </div>
            <div className="p-4 border-t border-slate-100 flex justify-end gap-2">
              <button onClick={() => setShowUploadDocModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg">Cancel</button>
            </div>
          </div>
        </div>
      )}

      {showRejectDocModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-xl shadow-xl w-full max-w-md">
            <div className="p-4 border-b border-slate-100 flex justify-between items-center">
              <h3 className="font-semibold text-red-600">Reject Document</h3>
              <button onClick={() => setShowRejectDocModal(false)} className="text-slate-400 hover:text-slate-600">×</button>
            </div>
            <div className="p-4">
              <label className="text-sm font-medium text-slate-600 mb-2 block">Rejection Reason</label>
              <textarea
                value={rejectReason}
                onChange={(e) => setRejectReason(e.target.value)}
                className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
                rows={4}
                placeholder="Enter reason for rejection..."
              />
            </div>
            <div className="p-4 border-t border-slate-100 flex justify-end gap-2">
              <button onClick={() => setShowRejectDocModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg">Cancel</button>
              <button onClick={handleRejectDocument} disabled={!rejectReason.trim()} className="px-4 py-2 bg-red-600 text-white rounded-lg disabled:opacity-50">Reject</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}