// src/components/dashboard/LiveLinksTable.tsx
import { ExternalLink, Calendar, TrendingUp } from 'lucide-react';
import Link from 'next/link';

interface LiveLink {
  order_number: string;
  website_name: string;
  da: number | null;
  dr: number | null;
  domain: string;
  live_links: string[] | null; // Fixed: Changed from any[] to string[] | null
  live_date: string;
}

export default function LiveLinksTable({ links }: { links: LiveLink[] }) {
  // Helper function to get the first live link
  const getFirstLiveLink = (liveLinks: string[] | null): string | null => {
    if (liveLinks && liveLinks.length > 0) {
      return liveLinks[0];
    }
    return null;
  };

  return (
    <div className="bg-white rounded-2xl border border-gray-200 overflow-hidden">
      <div className="overflow-x-auto">
        <table className="w-full">
          <thead className="bg-gray-50 border-b border-gray-200">
            <tr>
              <th className="text-left px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">
                Website
              </th>
              <th className="text-left px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">
                Metrics
              </th>
              <th className="text-left px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">
                Live URL
              </th>
              <th className="text-left px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">
                Live Date
              </th>
              <th className="text-left px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">
                Order #
              </th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-200">
            {links.length === 0 ? (
              <tr>
                <td colSpan={5} className="text-center py-12">
                  <p className="text-gray-500">No live links yet</p>
                  <Link
                    href="/websites"
                    className="text-[#0066FF] text-sm mt-2 inline-block hover:underline"
                  >
                    Place an order to get started →
                  </Link>
                </td>
              </tr>
            ) : (
              links.map((link, index) => {
                const firstLiveLink = getFirstLiveLink(link.live_links);
                return (
                  <tr key={index} className="hover:bg-gray-50 transition-colors">
                    <td className="px-6 py-4">
                      <div>
                        <p className="text-sm font-medium text-gray-900">{link.website_name}</p>
                        <p className="text-xs text-gray-500 mt-1">{link.domain}</p>
                      </div>
                    </td>
                    <td className="px-6 py-4">
                      <div className="flex items-center space-x-3">
                        <div className="flex items-center space-x-1">
                          <TrendingUp className="h-3 w-3 text-blue-500" />
                          <span className="text-sm text-gray-700">DA: {link.da || 'N/A'}</span>
                        </div>
                        <div className="flex items-center space-x-1">
                          <TrendingUp className="h-3 w-3 text-purple-500" />
                          <span className="text-sm text-gray-700">DR: {link.dr || 'N/A'}</span>
                        </div>
                      </div>
                    </td>
                    <td className="px-6 py-4">
                      {firstLiveLink ? (
                        <a
                          href={firstLiveLink}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="text-sm text-[#0066FF] hover:underline flex items-center"
                        >
                          View Link
                          <ExternalLink className="h-3 w-3 ml-1" />
                        </a>
                      ) : (
                        <span className="text-sm text-gray-400">Pending</span>
                      )}
                    </td>
                    <td className="px-6 py-4">
                      <div className="flex items-center space-x-1">
                        <Calendar className="h-3 w-3 text-gray-400" />
                        <span className="text-sm text-gray-600">
                          {new Date(link.live_date).toLocaleDateString()}
                        </span>
                      </div>
                    </td>
                    <td className="px-6 py-4">
                      <Link
                        href={`/dashboard/orders/${link.order_number}`}
                        className="text-sm text-gray-600 hover:text-[#0066FF]"
                      >
                        {link.order_number}
                      </Link>
                    </td>
                  </tr>
                );
              })
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}