'use client';

import { useState, useEffect, useCallback } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import {
  Package,
  CreditCard,
  CheckCircle,
  ExternalLink,
  Download,
  FileText,
  ChevronLeft,
  Layers,
  XCircle,
  Eye,
  Globe,
  ShoppingBag,
  File,
  Link2,
  Copy,
} from 'lucide-react';
import OrderStatusBadge from './OrderStatusBadge';
import OrderApprovalModal from './OrderApprovalModal';
import toast from 'react-hot-toast';

// Types
interface AssignedWebsite {
  package_order_website_id: string;
  website_id: string;
  website_name: string;
  website_domain: string;
  website_da: number;
  website_dr: number;
  website_traffic: string;
  website_spam_score: number;
  website_backlinks: number;
  website_link_type: string;
  website_base_price: number;
  website_sale_price: number;
  website_status: string;
  assigned_da: number;
  created_at: string;
}

interface PackageOrderItem {
  id: string;
  package_id: string;
  package_name: string;
  package_type: string;
  package_description?: string;
  quantity: number;
  unit_price: number;
  subtotal: number;
  google_sheet_url: string | null;
  rejection_reason?: string;
  rejected_at?: string;
  created_at: string;
  assigned_websites: AssignedWebsite[];
  documents?: OrderDocument[];
}

interface OrderItemDetail {
  id: string;
  order_item_id: string;
  desired_topic: string;
  target_keywords: string;
  word_count: number;
  special_instructions: string;
  created_at: string;
}

interface OrderDocument {
  id: string;
  file_name: string;
  file_path: string;
  file_type: string;
  file_size: number;
  uploaded_at: string;
}

interface LiveLink {
  url: string;
  submitted_at: string;
}

interface OrderItem {
  id: string;
  website_id: string;
  website_name: string;
  website_da: number;
  website_dr: number;
  website_domain: string;
  quantity: number;
  unit_price: number;
  subtotal: number;
  content_service: boolean;
  content_service_price?: number;
  live_links: LiveLink[] | null;
  created_at: string;
  rejection_reason?: string;
  rejected_at?: string;
  item_details?: OrderItemDetail[];
  documents?: OrderDocument[];
}

interface Order {
  id: string;
  order_number: string;
  created_at: string;
  total_amount: number;
  status: string;
  payment_status: string;
  payment_method: string;
  transaction_id: string;
  order_type: 'individual' | 'package' | 'package_individual';
  items: OrderItem[];
  package_items?: PackageOrderItem[];
}

interface OrderDetailsProps {
  order: Order;
}

function formatDate(dateString: string): string {
  return new Date(dateString).toLocaleString();
}

function formatFileSize(bytes: number): string {
  if (bytes === 0) return '0 Bytes';
  const k = 1024;
  const sizes = ['Bytes', 'KB', 'MB', 'GB'] as const;
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
}

function isUrl(str: string): boolean {
  try {
    new URL(str);
    return true;
  } catch {
    return false;
  }
}

// Helper function to safely get number value
function safeNumber(value: number | string | null | undefined): number {
  if (typeof value === 'number') return value;
  if (typeof value === 'string') {
    const parsed = parseFloat(value);
    return isNaN(parsed) ? 0 : parsed;
  }
  return 0;
}

// Document Section Component
function DocumentsSection({ documents, title = "Customer Submitted Content" }: { documents: OrderDocument[]; title?: string }) {
  if (!documents || documents.length === 0) return null;

  const urlDocuments = documents.filter(
    (doc) => doc.file_type === 'url' || isUrl(doc.file_path)
  );
  const fileDocuments = documents.filter(
    (doc) => doc.file_type !== 'url' && !isUrl(doc.file_path)
  );

  const handleDownload = async (filePath: string, fileName: string) => {
    try {
      const response = await fetch(filePath);
      const blob = await response.blob();
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = fileName;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      window.URL.revokeObjectURL(url);
      toast.success('File downloaded successfully');
    } catch (error) {
      console.error('Download error:', error);
      toast.error('Failed to download file');
    }
  };

  return (
    <div className="mt-3 pt-3 border-t border-gray-100">
      <h5 className="text-sm font-medium text-gray-700 mb-2">{title}</h5>
      
      {urlDocuments.length > 0 && (
        <div className="space-y-2 mb-4">
          {urlDocuments.map((doc) => (
            <div key={doc.id} className="flex items-center justify-between bg-blue-50 p-3 rounded-lg">
              <div className="flex-1">
                <a
                  href={doc.file_path}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-sm text-blue-600 hover:underline break-all"
                >
                  {doc.file_path}
                </a>
                <p className="text-xs text-gray-500 mt-1">
                  Submitted: {formatDate(doc.uploaded_at)}
                </p>
              </div>
              <div className="flex gap-2 ml-3 shrink-0">
                <button
                  onClick={() => window.open(doc.file_path, '_blank')}
                  className="px-3 py-1.5 text-sm text-blue-600 hover:text-blue-700 hover:bg-blue-100 rounded-lg transition-colors"
                >
                  Open
                </button>
                <button
                  onClick={() => {
                    navigator.clipboard.writeText(doc.file_path);
                    toast.success('URL copied to clipboard');
                  }}
                  className="px-3 py-1.5 text-sm text-gray-600 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors"
                >
                  <Copy className="h-3 w-3 inline mr-1" />
                  Copy
                </button>
              </div>
            </div>
          ))}
        </div>
      )}

      {fileDocuments.length > 0 && (
        <div className="space-y-2">
          {fileDocuments.map((doc) => (
            <div key={doc.id} className="flex items-center justify-between bg-gray-50 p-3 rounded-lg">
              <div className="flex items-center gap-3 flex-1">
                <File className="h-8 w-8 text-gray-500" />
                <div className="flex-1">
                  <p className="text-sm font-medium text-gray-900">{doc.file_name}</p>
                  <p className="text-xs text-gray-500">
                    {formatFileSize(doc.file_size)} • Uploaded: {formatDate(doc.uploaded_at)}
                  </p>
                </div>
              </div>
              <div className="flex gap-2 ml-3 shrink-0">
                <button
                  onClick={() => window.open(doc.file_path, '_blank')}
                  className="px-3 py-1.5 text-sm text-blue-600 hover:text-blue-700 hover:bg-blue-50 rounded-lg transition-colors"
                >
                  View
                </button>
                <button
                  onClick={() => handleDownload(doc.file_path, doc.file_name)}
                  className="px-3 py-1.5 text-sm text-green-600 hover:text-green-700 hover:bg-green-50 rounded-lg transition-colors"
                >
                  Download
                </button>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// Live Links Section Component
function LiveLinksSection({ links }: { links: LiveLink[] }) {
  if (!links || links.length === 0) return null;

  return (
    <div className="mt-3 pt-3 border-t border-gray-100">
      <h5 className="text-sm font-medium text-gray-700 mb-2">
        Live Links ({links.length}):
      </h5>
      <div className="space-y-2">
        {links.map((link, idx) => (
          <div key={idx} className="flex items-center justify-between bg-green-50 p-3 rounded-lg">
            <div className="flex-1">
              <a
                href={link.url}
                target="_blank"
                rel="noopener noreferrer"
                className="text-sm text-green-600 hover:underline break-all flex items-center"
              >
                <Link2 className="h-3 w-3 mr-1" />
                {link.url}
              </a>
              {link.submitted_at && (
                <p className="text-xs text-gray-500 mt-1">
                  Submitted: {formatDate(link.submitted_at)}
                </p>
              )}
            </div>
            <button
              onClick={() => {
                navigator.clipboard.writeText(link.url);
                toast.success('Link copied to clipboard');
              }}
              className="ml-2 px-2 py-1 text-xs text-gray-600 hover:text-gray-800 hover:bg-gray-200 rounded transition-colors"
            >
              <Copy className="h-3 w-3" />
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}

// Content Details Section Component
function ContentDetailsSection({ details }: { details: OrderItemDetail[] }) {
  if (!details || details.length === 0) return null;

  const detail = details[0];

  return (
    <div className="mt-3 pt-3 border-t border-gray-100">
      <h5 className="text-sm font-medium text-gray-700 mb-2">Content Writing Requirements</h5>
      <div className="space-y-2 text-sm">
        <div className="bg-blue-50 rounded-lg p-3">
          <span className="text-gray-600 font-medium">Desired Topic:</span>
          <p className="mt-1 text-gray-800">{detail.desired_topic}</p>
        </div>
        {detail.target_keywords && (
          <div className="bg-purple-50 rounded-lg p-3">
            <span className="text-gray-600 font-medium">Target Keywords:</span>
            <div className="mt-1 flex flex-wrap gap-2">
              {detail.target_keywords.split(',').map((keyword, idx) => (
                <span
                  key={idx}
                  className="inline-flex items-center px-2 py-1 bg-white rounded-md text-xs text-gray-700 border border-gray-200"
                >
                  {keyword.trim()}
                </span>
              ))}
            </div>
          </div>
        )}
        {detail.word_count && (
          <div className="bg-green-50 rounded-lg p-3">
            <span className="text-gray-600 font-medium">Word Count:</span>
            <p className="mt-1 text-gray-800">{detail.word_count.toLocaleString()} words</p>
          </div>
        )}
        {detail.special_instructions && (
          <div className="bg-amber-50 rounded-lg p-3">
            <span className="text-gray-600 font-medium">Special Instructions:</span>
            <p className="mt-1 text-gray-700 whitespace-pre-wrap">
              {detail.special_instructions}
            </p>
          </div>
        )}
      </div>
    </div>
  );
}

// Individual Order Item Component
function IndividualOrderItem({ item }: { item: OrderItem; orderStatus: string }) {
  const hasLiveLinks = item.live_links && item.live_links.length > 0;
  const hasDocuments = item.documents && item.documents.length > 0;
  const hasContentDetails = item.item_details && item.item_details.length > 0;

  return (
    <div className="border border-gray-200 rounded-xl p-4 hover:shadow-md transition-shadow">
      <div className="flex justify-between items-start mb-3">
        <div>
          <h4 className="font-medium text-gray-900 text-lg">{item.website_name}</h4>
          <a
            href={`https://${item.website_domain}`}
            target="_blank"
            rel="noopener noreferrer"
            className="text-sm text-blue-600 hover:underline"
          >
            {item.website_domain}
          </a>
          <div className="flex items-center gap-3 mt-1">
            <span className="text-xs text-gray-500">DA: {item.website_da || 'N/A'}</span>
            <span className="text-xs text-gray-500">DR: {item.website_dr || 'N/A'}</span>
          </div>
        </div>
        {hasLiveLinks && (
          <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-700">
            <CheckCircle className="h-3 w-3 mr-1" />
            Live
          </span>
        )}
      </div>

      <div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm mb-3">
        <div>
          <span className="text-gray-500">Quantity:</span>
          <p className="font-medium">{item.quantity}</p>
        </div>
        <div>
          <span className="text-gray-500">Unit Price:</span>
          <p className="font-medium">${safeNumber(item.unit_price).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</p>
        </div>
        {item.content_service && (
          <div>
            <span className="text-gray-500">Content Service:</span>
            <p className="font-medium">${safeNumber(item.content_service_price).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</p>
          </div>
        )}
        <div>
          <span className="text-gray-500">Subtotal:</span>
          <p className="font-medium">${safeNumber(item.subtotal).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</p>
        </div>
      </div>

      {/* Customer Submitted Documents */}
      {hasDocuments && <DocumentsSection documents={item.documents!} />}

      {/* Content Writing Details (for content service) */}
      {item.content_service && hasContentDetails && (
        <ContentDetailsSection details={item.item_details!} />
      )}

      {/* Live Links */}
      {hasLiveLinks && <LiveLinksSection links={item.live_links!} />}

      {/* Rejection Reason */}
      {item.rejection_reason && (
        <div className="mt-3 pt-3 border-t border-red-200 bg-red-50 rounded-lg p-3">
          <div className="flex items-start">
            <XCircle className="h-4 w-4 text-red-600 mt-0.5 mr-2 shrink-0" />
            <div>
              <p className="text-sm font-medium text-red-800">Rejection Reason:</p>
              <p className="text-sm text-red-700">{item.rejection_reason}</p>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// Package Order Item Component
function PackageOrderItemComponent({ 
  packageItem, 
  onViewWebsites 
}: { 
  packageItem: PackageOrderItem; 
  orderStatus: string;
  onViewWebsites: (pkg: PackageOrderItem) => void;
}) {
  const hasWebsites = packageItem.assigned_websites && packageItem.assigned_websites.length > 0;
  const hasDocuments = packageItem.documents && packageItem.documents.length > 0;

  return (
    <div className="border border-gray-200 rounded-xl p-4 hover:shadow-md transition-shadow">
      <div className="flex justify-between items-start mb-3">
        <div>
          <div className="flex items-center gap-2">
            <Package className="h-5 w-5 text-purple-500" />
            <h4 className="font-medium text-gray-900 text-lg">{packageItem.package_name}</h4>
          </div>
          {packageItem.package_description && (
            <p className="text-sm text-gray-600 mt-1">{packageItem.package_description}</p>
          )}
        </div>
        <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-700">
          {packageItem.package_type}
        </span>
      </div>

      <div className="grid grid-cols-2 md:grid-cols-3 gap-3 text-sm mb-3">
        <div>
          <span className="text-gray-500">Quantity:</span>
          <p className="font-medium">{packageItem.quantity}</p>
        </div>
        <div>
          <span className="text-gray-500">Unit Price:</span>
          <p className="font-medium">${safeNumber(packageItem.unit_price).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</p>
        </div>
        <div>
          <span className="text-gray-500">Subtotal:</span>
          <p className="font-medium">${safeNumber(packageItem.subtotal).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</p>
        </div>
      </div>

      {/* Customer Submitted Documents for Package */}
      {hasDocuments && <DocumentsSection documents={packageItem.documents!} />}

      {/* Google Sheet Link */}
      {packageItem.google_sheet_url && (
        <div className="mt-3 pt-3 border-t border-gray-100">
          <span className="text-sm font-medium text-gray-700">Google Sheet:</span>
          <div className="mt-1">
            <a
              href={packageItem.google_sheet_url}
              target="_blank"
              rel="noopener noreferrer"
              className="text-sm text-blue-600 hover:underline break-all flex items-center"
            >
              <FileText className="h-3 w-3 mr-1" />
              {packageItem.google_sheet_url}
            </a>
          </div>
        </div>
      )}

      {/* Assigned Websites */}
      {hasWebsites && (
        <div className="mt-3 pt-3 border-t border-gray-100">
          <div className="flex items-center justify-between">
            <h5 className="text-sm font-medium text-gray-700">
              Assigned Websites ({packageItem.assigned_websites.length})
            </h5>
            <button
              onClick={() => onViewWebsites(packageItem)}
              className="text-sm text-[#0066FF] hover:underline"
            >
              View All
            </button>
          </div>
          <div className="mt-2 space-y-2 max-h-48 overflow-y-auto">
            {packageItem.assigned_websites.slice(0, 3).map((website) => (
              <div
                key={website.package_order_website_id}
                className="flex items-center justify-between bg-gray-50 p-2 rounded-lg"
              >
                <div>
                  <p className="text-sm font-medium text-gray-900">{website.website_name}</p>
                  <p className="text-xs text-gray-500">
                    DA: {website.assigned_da || website.website_da || 'N/A'}
                  </p>
                </div>
                <a
                  href={`https://${website.website_domain}`}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-xs text-blue-600 hover:underline"
                >
                  Visit
                </a>
              </div>
            ))}
            {packageItem.assigned_websites.length > 3 && (
              <p className="text-xs text-gray-500 text-center">
                +{packageItem.assigned_websites.length - 3} more websites
              </p>
            )}
          </div>
        </div>
      )}

      {/* Rejection Reason */}
      {packageItem.rejection_reason && (
        <div className="mt-3 pt-3 border-t border-red-200 bg-red-50 rounded-lg p-3">
          <div className="flex items-start">
            <XCircle className="h-4 w-4 text-red-600 mt-0.5 mr-2 shrink-0" />
            <div>
              <p className="text-sm font-medium text-red-800">Rejection Reason:</p>
              <p className="text-sm text-red-700">{packageItem.rejection_reason}</p>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// Assigned Websites Modal
function AssignedWebsitesModal({
  isOpen,
  onClose,
  packageItem,
}: {
  isOpen: boolean;
  onClose: () => void;
  packageItem: PackageOrderItem | null;
}) {
  if (!isOpen || !packageItem) return null;

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
      <div className="bg-white rounded-2xl max-w-3xl w-full mx-4 max-h-[80vh] overflow-hidden">
        <div className="sticky top-0 bg-white border-b border-gray-200 px-6 py-4 flex justify-between items-center">
          <div>
            <h3 className="text-lg font-semibold text-gray-900">
              Assigned Websites - {packageItem.package_name}
            </h3>
            <p className="text-sm text-gray-500">
              {packageItem.assigned_websites.length} websites assigned to this package
            </p>
          </div>
          <button
            onClick={onClose}
            className="text-gray-400 hover:text-gray-600 transition-colors"
          >
            <XCircle className="h-6 w-6" />
          </button>
        </div>
        <div className="p-6 overflow-y-auto max-h-[calc(80vh-80px)]">
          <div className="space-y-3">
            {packageItem.assigned_websites.map((website) => (
              <div
                key={website.package_order_website_id}
                className="flex items-center justify-between p-4 bg-gray-50 rounded-xl hover:bg-gray-100 transition-colors"
              >
                <div>
                  <div className="flex items-center gap-2">
                    <Globe className="h-4 w-4 text-blue-500" />
                    <p className="font-medium text-gray-900">{website.website_name}</p>
                  </div>
                  <a
                    href={`https://${website.website_domain}`}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-sm text-blue-600 hover:underline block mt-1"
                  >
                    {website.website_domain}
                  </a>
                  <div className="flex items-center gap-3 mt-2">
                    <span className="text-xs text-gray-500">
                      DA: {website.assigned_da || website.website_da || 'N/A'}
                    </span>
                    <span className="text-xs text-gray-500">
                      DR: {website.website_dr || 'N/A'}
                    </span>
                    <span className="text-xs text-gray-500">
                      Traffic: {website.website_traffic || 'N/A'}
                    </span>
                  </div>
                </div>
                <div className="text-right">
                  {website.website_sale_price && website.website_sale_price < website.website_base_price ? (
                    <>
                      <p className="text-sm font-bold text-green-600">
                        ${safeNumber(website.website_sale_price).toLocaleString()}
                      </p>
                      <p className="text-xs text-gray-400 line-through">
                        ${safeNumber(website.website_base_price).toLocaleString()}
                      </p>
                    </>
                  ) : (
                    <p className="text-sm font-medium text-gray-900">
                      ${safeNumber(website.website_base_price).toLocaleString()}
                    </p>
                  )}
                  <span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium mt-1 ${
                    website.website_link_type === 'Dofollow'
                      ? 'bg-green-100 text-green-700'
                      : 'bg-gray-100 text-gray-700'
                  }`}>
                    {website.website_link_type || 'Dofollow'}
                  </span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

export default function OrderDetails({ order }: OrderDetailsProps) {
  const router = useRouter();
  const [isDownloading, setIsDownloading] = useState(false);
  const [showApprovalModal, setShowApprovalModal] = useState(false);
  const [showWebsitesModal, setShowWebsitesModal] = useState(false);
  const [selectedPackage, setSelectedPackage] = useState<PackageOrderItem | null>(null);
  const [selectedItem, setSelectedItem] = useState<{
    id: string;
    name: string;
    type: 'individual' | 'package';
    itemId?: string;
    packageItemId?: string;
  } | null>(null);
  
  // State for individual items with documents
  const [individualItemsWithDetails, setIndividualItemsWithDetails] = useState<Record<string, OrderItem>>({});
  
  // State for package items with documents
  const [packageItemsWithDetails, setPackageItemsWithDetails] = useState<Record<string, PackageOrderItem>>({});

  const hasIndividualItems = order.order_type === 'individual' || order.order_type === 'package_individual';
  const hasPackageItems = order.order_type === 'package' || order.order_type === 'package_individual';
  const isPendingReview = order.status === 'pending_review';

  // Fetch documents for individual items
  const fetchIndividualItemDocuments = useCallback(async (orderItemId: string) => {
    try {
      const response = await fetch(`/api/frontend/dashboard/orders/item-documents?order_item_id=${orderItemId}`);
      const data = await response.json();
      if (response.ok && data.documents) {
        setIndividualItemsWithDetails(prev => ({
          ...prev,
          [orderItemId]: {
            ...prev[orderItemId],
            documents: data.documents
          }
        }));
      }
    } catch (error) {
      console.error('Failed to fetch individual item documents:', error);
    }
  }, []);

  // Fetch documents for package items
  const fetchPackageItemDocuments = useCallback(async (packageOrderItemId: string) => {
    try {
      const response = await fetch(`/api/frontend/dashboard/orders/package-item-documents?package_order_item_id=${packageOrderItemId}`);
      const data = await response.json();
      if (response.ok && data.documents) {
        setPackageItemsWithDetails(prev => ({
          ...prev,
          [packageOrderItemId]: {
            ...prev[packageOrderItemId],
            documents: data.documents
          }
        }));
      }
    } catch (error) {
      console.error('Failed to fetch package item documents:', error);
    }
  }, []);

  // Fetch documents for all individual items on mount
  useEffect(() => {
    if (hasIndividualItems && order.items) {
      order.items.forEach(item => {
        fetchIndividualItemDocuments(item.id);
      });
    }
  }, [hasIndividualItems, order.items, fetchIndividualItemDocuments]);

  // Fetch documents for all package items on mount
  useEffect(() => {
    if (hasPackageItems && order.package_items) {
      order.package_items.forEach(pkg => {
        fetchPackageItemDocuments(pkg.id);
      });
    }
  }, [hasPackageItems, order.package_items, fetchPackageItemDocuments]);

  const handleDownloadInvoice = async () => {
    setIsDownloading(true);
    try {
      const response = await fetch(`/api/frontend/dashboard/orders/${order.id}/invoice`);
      const blob = await response.blob();
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `invoice-${order.order_number}.pdf`;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      window.URL.revokeObjectURL(url);
      toast.success('Invoice downloaded successfully');
    } catch (error) {
      console.error('Error downloading invoice:', error);
      toast.error('Failed to download invoice');
    } finally {
      setIsDownloading(false);
    }
  };

  const handleOrderUpdate = () => {
    router.refresh();
  };

  const handleApproveRejectOrder = () => {
    setSelectedItem({
      id: order.id,
      name: `Order #${order.order_number}`,
      type: order.order_type === 'individual' ? 'individual' : 'package',
    });
    setShowApprovalModal(true);
  };

  const handleViewWebsites = (pkg: PackageOrderItem) => {
    setSelectedPackage(pkg);
    setShowWebsitesModal(true);
  };

  const getOrderTypeLabel = () => {
    switch (order.order_type) {
      case 'individual':
        return 'Individual Order';
      case 'package':
        return 'Package Order';
      case 'package_individual':
        return 'Mixed Order (Package + Individual)';
      default:
        return order.order_type;
    }
  };

  const getOrderTypeIcon = () => {
    switch (order.order_type) {
      case 'package':
        return <Package className="h-5 w-5 text-purple-500" />;
      case 'package_individual':
        return <ShoppingBag className="h-5 w-5 text-indigo-500" />;
      default:
        return null;
    }
  };

  const getTimelineSteps = () => {
    const steps = [
      { key: 'pending', label: 'Order Placed', description: 'Your order has been received' },
      { key: 'confirmed', label: 'Order Confirmed', description: 'Payment verified, order confirmed' },
      { key: 'pending_review', label: 'Pending Review', description: 'Links are ready for your review' },
      { key: 'completed', label: 'Completed', description: 'All links approved and live' },
    ];

    let currentStepIndex = 0;
    if (order.status === 'confirmed') currentStepIndex = 1;
    else if (order.status === 'pending_review') currentStepIndex = 2;
    else if (order.status === 'completed') currentStepIndex = 3;

    return { steps, currentStepIndex };
  };

  const { steps, currentStepIndex } = getTimelineSteps();

  // Calculate individual items subtotal safely
  const individualSubtotal = order.items?.reduce((sum, item) => {
    return sum + safeNumber(item.subtotal);
  }, 0) || 0;

  // Merge package items with their documents
  const mergedPackageItems = order.package_items?.map(pkg => ({
    ...pkg,
    documents: packageItemsWithDetails[pkg.id]?.documents
  })) || [];

  // Calculate package items subtotal safely
  const packageSubtotal = mergedPackageItems.reduce((sum, pkg) => {
    return sum + safeNumber(pkg.subtotal);
  }, 0);

  return (
    <div className="space-y-6">
      {/* Back Button */}
      <Link
        href="/dashboard/orders"
        className="inline-flex items-center text-sm text-gray-600 hover:text-[#0066FF] transition-colors"
      >
        <ChevronLeft className="h-4 w-4 mr-1" />
        Back to Orders
      </Link>

      {/* Order Header */}
      <div className="bg-white rounded-2xl border border-gray-200 p-6">
        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
          <div>
            <div className="flex items-center space-x-3 flex-wrap gap-2">
              {getOrderTypeIcon()}
              <h2 className="text-xl font-bold text-gray-900">{order.order_number}</h2>
              <OrderStatusBadge status={order.status} />
              <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-700">
                {getOrderTypeLabel()}
              </span>
            </div>
            <p className="text-sm text-gray-600 mt-2">
              Placed on {new Date(order.created_at).toLocaleDateString()} at{' '}
              {new Date(order.created_at).toLocaleTimeString()}
            </p>
          </div>
          <div className="flex items-center space-x-3">
            {isPendingReview && (
              <button
                onClick={handleApproveRejectOrder}
                className="inline-flex items-center px-4 py-2 bg-orange-600 hover:bg-orange-700 text-white rounded-lg text-sm font-medium transition-colors"
              >
                <Eye className="h-4 w-4 mr-2" />
                Review Order
              </button>
            )}
            <button
              onClick={handleDownloadInvoice}
              disabled={isDownloading}
              className="inline-flex items-center px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors disabled:opacity-50"
            >
              {isDownloading ? (
                <>
                  <div className="w-4 h-4 border-2 border-gray-300 border-t-[#0066FF] rounded-full animate-spin mr-2" />
                  Downloading...
                </>
              ) : (
                <>
                  <Download className="h-4 w-4 mr-2" />
                  Download Invoice
                </>
              )}
            </button>
          </div>
        </div>
      </div>

      {/* Order Timeline */}
      <div className="bg-white rounded-2xl border border-gray-200 p-6">
        <h3 className="text-lg font-semibold text-gray-900 mb-6">Order Timeline</h3>
        <div className="relative">
          <div className="absolute left-6 top-0 bottom-0 w-px bg-gray-200" />
          <div className="space-y-8">
            {steps.map((step, index) => (
              <div key={step.key} className="relative flex items-start">
                <div
                  className={`relative z-10 flex items-center justify-center w-12 h-12 rounded-full border-2 ${
                    index <= currentStepIndex
                      ? 'bg-[#0066FF] border-[#0066FF]'
                      : 'bg-white border-gray-300'
                  }`}
                >
                  {index <= currentStepIndex ? (
                    <CheckCircle className="h-6 w-6 text-white" />
                  ) : (
                    <div className="w-6 h-6 rounded-full bg-gray-300" />
                  )}
                </div>
                <div className="ml-4 flex-1">
                  <div className="flex items-center justify-between">
                    <h4
                      className={`text-base font-semibold ${
                        index <= currentStepIndex ? 'text-gray-900' : 'text-gray-500'
                      }`}
                    >
                      {step.label}
                    </h4>
                    {index === currentStepIndex && order.status !== 'completed' && (
                      <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                        Current
                      </span>
                    )}
                  </div>
                  <p className="text-sm text-gray-600 mt-1">{step.description}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Order Summary Cards */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {/* Payment Info */}
        <div className="bg-white rounded-2xl border border-gray-200 p-6">
          <div className="flex items-center space-x-3 mb-4">
            <div className="p-2 bg-green-50 rounded-lg">
              <CreditCard className="h-5 w-5 text-green-600" />
            </div>
            <h3 className="font-semibold text-gray-900">Payment Information</h3>
          </div>
          <div className="space-y-3">
            <div className="flex justify-between">
              <span className="text-sm text-gray-600">Status</span>
              <span
                className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
                  order.payment_status === 'paid'
                    ? 'bg-green-100 text-green-700'
                    : order.payment_status === 'failed'
                    ? 'bg-red-100 text-red-700'
                    : 'bg-yellow-100 text-yellow-700'
                }`}
              >
                {order.payment_status === 'paid' ? 'Paid' : 
                 order.payment_status === 'failed' ? 'Failed' : 'Pending'}
              </span>
            </div>
            <div className="flex justify-between">
              <span className="text-sm text-gray-600">Method</span>
              <span className="text-sm font-medium text-gray-900 capitalize">
                {order.payment_method || 'N/A'}
              </span>
            </div>
            {order.transaction_id && (
              <div className="flex justify-between">
                <span className="text-sm text-gray-600">Transaction ID</span>
                <span className="text-sm font-medium text-gray-900 font-mono">{order.transaction_id}</span>
              </div>
            )}
            <div className="flex justify-between pt-2 border-t border-gray-100">
              <span className="text-sm font-semibold text-gray-900">Total Amount</span>
              <span className="text-lg font-bold text-gray-900">
                ${safeNumber(order.total_amount).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
              </span>
            </div>
          </div>
        </div>

        {/* Order Info */}
        <div className="bg-white rounded-2xl border border-gray-200 p-6">
          <div className="flex items-center space-x-3 mb-4">
            <div className="p-2 bg-blue-50 rounded-lg">
              <Package className="h-5 w-5 text-blue-600" />
            </div>
            <h3 className="font-semibold text-gray-900">Order Information</h3>
          </div>
          <div className="space-y-3">
            <div className="flex justify-between">
              <span className="text-sm text-gray-600">Order Type</span>
              <span className="text-sm font-medium text-gray-900 capitalize">
                {getOrderTypeLabel()}
              </span>
            </div>
            <div className="flex justify-between">
              <span className="text-sm text-gray-600">Items Count</span>
              <span className="text-sm font-medium text-gray-900">
                {hasIndividualItems && order.items ? order.items.length : 0} individual item(s)
                {hasPackageItems && order.package_items ? `, ${order.package_items.length} package(s)` : ''}
              </span>
            </div>
            <div className="flex justify-between">
              <span className="text-sm text-gray-600">Order Date</span>
              <span className="text-sm font-medium text-gray-900">
                {new Date(order.created_at).toLocaleDateString()}
              </span>
            </div>
            <div className="flex justify-between">
              <span className="text-sm text-gray-600">Order Status</span>
              <OrderStatusBadge status={order.status} />
            </div>
          </div>
        </div>

        {/* Support Info */}
        <div className="bg-white rounded-2xl border border-gray-200 p-6">
          <div className="flex items-center space-x-3 mb-4">
            <div className="p-2 bg-purple-50 rounded-lg">
              <FileText className="h-5 w-5 text-purple-600" />
            </div>
            <h3 className="font-semibold text-gray-900">Need Help?</h3>
          </div>
          <div className="space-y-3">
            <p className="text-sm text-gray-600">
              Have questions about this order? Our support team is here to help.
            </p>
            <Link
              href="/dashboard/support"
              className="inline-flex items-center text-sm text-[#0066FF] hover:underline"
            >
              Contact Support
              <ExternalLink className="h-3 w-3 ml-1" />
            </Link>
          </div>
        </div>
      </div>

      {/* Individual Order Items Section */}
      {hasIndividualItems && order.items && order.items.length > 0 && (
        <div className="bg-white rounded-2xl border border-gray-200 overflow-hidden">
          <div className="p-6 border-b border-gray-200">
            <div className="flex items-center gap-2">
              <Globe className="h-5 w-5 text-blue-500" />
              <h3 className="text-lg font-semibold text-gray-900">Individual Items</h3>
            </div>
          </div>
          <div className="p-6 space-y-4">
            {order.items.map((item) => (
              <IndividualOrderItem 
                key={item.id} 
                item={{
                  ...item,
                  documents: individualItemsWithDetails[item.id]?.documents
                }} 
                orderStatus={order.status}
              />
            ))}
            {/* Individual Items Total */}
            <div className="border-t border-gray-200 pt-4 mt-4">
              <div className="flex justify-end">
                <div className="text-right">
                  <p className="text-sm text-gray-500">Individual Items Subtotal</p>
                  <p className="text-xl font-bold text-gray-900">
                    ${individualSubtotal.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Package Items Section */}
      {hasPackageItems && mergedPackageItems.length > 0 && (
        <div className="bg-white rounded-2xl border border-gray-200 overflow-hidden">
          <div className="p-6 border-b border-gray-200">
            <div className="flex items-center gap-2">
              <Layers className="h-5 w-5 text-purple-500" />
              <h3 className="text-lg font-semibold text-gray-900">Package Items</h3>
            </div>
            <p className="text-sm text-gray-600 mt-1">
              {mergedPackageItems.length} package{mergedPackageItems.length > 1 ? 's' : ''} in this order
            </p>
          </div>
          <div className="p-6 space-y-4">
            {mergedPackageItems.map((pkg) => (
              <PackageOrderItemComponent 
                key={pkg.id}
                packageItem={pkg}
                orderStatus={order.status}
                onViewWebsites={handleViewWebsites}
              />
            ))}
            {/* Package Items Total */}
            <div className="border-t border-gray-200 pt-4 mt-4">
              <div className="flex justify-end">
                <div className="text-right">
                  <p className="text-sm text-gray-500">Package Items Subtotal</p>
                  <p className="text-xl font-bold text-gray-900">
                    ${packageSubtotal.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Order Total Summary */}
      <div className="bg-linear-to-r from-blue-50 to-purple-50 rounded-2xl p-6 border border-blue-100">
        <div className="flex justify-between items-center">
          <div>
            <h3 className="text-lg font-semibold text-gray-900">Order Total</h3>
            <p className="text-sm text-gray-600">
              Total amount including all items and services
            </p>
          </div>
          <div className="text-right">
            <p className="text-sm text-gray-600">Grand Total</p>
            <p className="text-3xl font-bold text-gray-900">
              ${safeNumber(order.total_amount).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
            </p>
          </div>
        </div>
      </div>

      {/* Need Additional Help */}
      <div className="bg-linear-to-r from-blue-50 to-purple-50 rounded-2xl p-6 border border-blue-100">
        <div className="flex items-center justify-between flex-wrap gap-4">
          <div>
            <h3 className="text-lg font-semibold text-gray-900">Need Additional Help?</h3>
            <p className="text-sm text-gray-600 mt-1">
              Our support team is available 24/7 to assist you with any questions
            </p>
          </div>
          <Link
            href="/dashboard/support"
            className="inline-flex items-center px-6 py-3 bg-[#0066FF] text-white rounded-xl font-medium hover:bg-[#0052cc] transition-colors"
          >
            Contact Support
            <ExternalLink className="h-4 w-4 ml-2" />
          </Link>
        </div>
      </div>

      {/* Approval Modal */}
      {showApprovalModal && selectedItem && (
        <OrderApprovalModal
          isOpen={showApprovalModal}
          onClose={() => {
            setShowApprovalModal(false);
            setSelectedItem(null);
          }}
          orderId={order.id}
          orderNumber={order.order_number}
          orderType={selectedItem.type}
          itemId={selectedItem.itemId}
          packageItemId={selectedItem.packageItemId}
          itemName={selectedItem.name}
          onSuccess={handleOrderUpdate}
        />
      )}

      {/* Assigned Websites Modal */}
      {showWebsitesModal && selectedPackage && (
        <AssignedWebsitesModal
          isOpen={showWebsitesModal}
          onClose={() => {
            setShowWebsitesModal(false);
            setSelectedPackage(null);
          }}
          packageItem={selectedPackage}
        />
      )}
    </div>
  );
}