// src/components/dashboard/OrderItemDetailsModal.tsx
'use client';

import { useEffect } from 'react';
import { X, FileText, Target, Type, MessageSquare, Calendar } from 'lucide-react';

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

interface OrderItemDetailsModalProps {
  isOpen: boolean;
  onClose: () => void;
  title: string;
  websiteName: string;
  details: OrderItemDetail[];
}

export default function OrderItemDetailsModal({
  isOpen,
  onClose,
  title,
  websiteName,
  details,
}: OrderItemDetailsModalProps) {
  const detail = details[0]; // Get the first detail (there should be only one per order item)

  // Handle escape key press
  useEffect(() => {
    const handleEsc = (e: KeyboardEvent) => {
      if (e.key === 'Escape' && isOpen) {
        onClose();
      }
    };
    window.addEventListener('keydown', handleEsc);
    return () => window.removeEventListener('keydown', handleEsc);
  }, [isOpen, onClose]);

  // Handle body scroll lock
  useEffect(() => {
    if (isOpen) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = 'unset';
    }
    return () => {
      document.body.style.overflow = 'unset';
    };
  }, [isOpen]);

  if (!isOpen || !detail) return null;

  return (
    <>
      {/* Backdrop */}
      <div
        className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50"
        onClick={onClose}
      />
      
      {/* Modal Container */}
      <div className="fixed inset-0 overflow-y-auto z-50">
        <div className="flex min-h-full items-center justify-center p-4">
          {/* Modal Panel */}
          <div className="w-full max-w-2xl transform overflow-hidden rounded-2xl bg-white shadow-xl transition-all">
            {/* Header */}
            <div className="bg-linear-to-r from-blue-600 to-cyan-600 px-6 py-4">
              <div className="flex items-center justify-between">
                <div>
                  <h3 className="text-lg font-semibold text-white">
                    {title}
                  </h3>
                  <p className="text-blue-100 text-sm mt-1">
                    Content requirements for {websiteName}
                  </p>
                </div>
                <button
                  onClick={onClose}
                  className="text-white/80 hover:text-white transition-colors"
                >
                  <X className="h-5 w-5" />
                </button>
              </div>
            </div>

            {/* Content */}
            <div className="p-6 space-y-6">
              {/* Desired Topic */}
              <div className="bg-blue-50 rounded-xl p-4">
                <div className="flex items-start gap-3">
                  <div className="p-2 bg-blue-100 rounded-lg">
                    <FileText className="h-5 w-5 text-blue-600" />
                  </div>
                  <div className="flex-1">
                    <h4 className="text-sm font-semibold text-gray-900 mb-1">
                      Desired Topic
                    </h4>
                    <p className="text-gray-700 whitespace-pre-wrap">
                      {detail.desired_topic || 'Not specified'}
                    </p>
                  </div>
                </div>
              </div>

              {/* Target Keywords */}
              <div className="bg-purple-50 rounded-xl p-4">
                <div className="flex items-start gap-3">
                  <div className="p-2 bg-purple-100 rounded-lg">
                    <Target className="h-5 w-5 text-purple-600" />
                  </div>
                  <div className="flex-1">
                    <h4 className="text-sm font-semibold text-gray-900 mb-1">
                      Target Keywords
                    </h4>
                    {detail.target_keywords ? (
                      <div className="flex flex-wrap gap-2">
                        {detail.target_keywords.split(',').map((keyword, index) => (
                          <span
                            key={index}
                            className="inline-flex items-center px-2 py-1 bg-white rounded-lg text-xs text-gray-700 border border-gray-200"
                          >
                            {keyword.trim()}
                          </span>
                        ))}
                      </div>
                    ) : (
                      <p className="text-gray-500">No keywords specified</p>
                    )}
                  </div>
                </div>
              </div>

              {/* Word Count */}
              <div className="bg-green-50 rounded-xl p-4">
                <div className="flex items-start gap-3">
                  <div className="p-2 bg-green-100 rounded-lg">
                    <Type className="h-5 w-5 text-green-600" />
                  </div>
                  <div className="flex-1">
                    <h4 className="text-sm font-semibold text-gray-900 mb-1">
                      Word Count
                    </h4>
                    <p className="text-gray-700">
                      {detail.word_count.toLocaleString()} words
                    </p>
                  </div>
                </div>
              </div>

              {/* Special Instructions */}
              {detail.special_instructions && (
                <div className="bg-amber-50 rounded-xl p-4">
                  <div className="flex items-start gap-3">
                    <div className="p-2 bg-amber-100 rounded-lg">
                      <MessageSquare className="h-5 w-5 text-amber-600" />
                    </div>
                    <div className="flex-1">
                      <h4 className="text-sm font-semibold text-gray-900 mb-1">
                        Special Instructions
                      </h4>
                      <p className="text-gray-700 whitespace-pre-wrap">
                        {detail.special_instructions}
                      </p>
                    </div>
                  </div>
                </div>
              )}

              {/* Created Date */}
              <div className="bg-gray-50 rounded-xl p-4">
                <div className="flex items-start gap-3">
                  <div className="p-2 bg-gray-100 rounded-lg">
                    <Calendar className="h-5 w-5 text-gray-600" />
                  </div>
                  <div className="flex-1">
                    <h4 className="text-sm font-semibold text-gray-900 mb-1">
                      Requirements Submitted
                    </h4>
                    <p className="text-gray-600">
                      {new Date(detail.created_at).toLocaleDateString()} at{' '}
                      {new Date(detail.created_at).toLocaleTimeString()}
                    </p>
                  </div>
                </div>
              </div>
            </div>

            {/* Footer */}
            <div className="border-t border-gray-200 px-6 py-4 bg-gray-50">
              <button
                onClick={onClose}
                className="w-full px-4 py-2 bg-[#0066FF] text-white rounded-lg font-medium hover:bg-[#0052cc] transition-colors"
              >
                Close
              </button>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}