"use client";

import { useState, useEffect } from 'react';

interface LinkDetails {
  id: string;
  name: string;
  shortUrl: string;
  originalUrl: string;
  creator: string;
  createdAt: string;
  visits: number;
  visitChange: number;
  uniqueVisitors: number;
  uniqueVisitorsChange: number;
  avgTime: string;
  avgTimeChange: number;
  conversionRate: number;
  conversionChange: number;
  status: 'active' | 'inactive' | 'expired';
  tags: string[];
}

interface LinkDetailsCardProps {
  linkId: string | null;
  onClose: () => void;
}

export default function LinkDetailsCard({ linkId, onClose }: LinkDetailsCardProps) {
  const [linkDetails, setLinkDetails] = useState<LinkDetails | null>(null);
  const [loading, setLoading] = useState(true);
  const [activeTab, setActiveTab] = useState<'overview' | 'referrers' | 'devices' | 'locations'>('overview');
  
  useEffect(() => {
    if (linkId) {
      // Simulate API call to fetch link details
      const fetchData = async () => {
        setLoading(true);
        // In a real app, this would be an API call like:
        // const response = await fetch(`/api/links/${linkId}`);
        // const data = await response.json();
        
        // For demo, using mock data
        setTimeout(() => {
          setLinkDetails({
            id: linkId,
            name: "Product Launch Campaign",
            shortUrl: "short.io/prlaunch",
            originalUrl: "https://example.com/products/new-product-launch-summer-2023",
            creator: "Sarah Johnson",
            createdAt: "2023-05-15",
            visits: 3240,
            visitChange: 12.5,
            uniqueVisitors: 2180,
            uniqueVisitorsChange: 8.3,
            avgTime: "2m 45s",
            avgTimeChange: -5.2,
            conversionRate: 4.8,
            conversionChange: 1.2,
            status: 'active',
            tags: ["marketing", "product", "summer"]
          });
          setLoading(false);
        }, 800);
      };
      
      fetchData();
    }
  }, [linkId]);
  
  if (!linkId) return null;
  
  return (
    <div className="fixed inset-0 z-20 overflow-y-auto bg-background/80 backdrop-blur-sm">
      <div className="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div className="inline-block w-full max-w-4xl overflow-hidden text-left align-middle transition-all transform bg-card-bg rounded-xl shadow-xl">
          {/* Header */}
          <div className="flex items-center justify-between p-4 border-b border-card-border">
            <div className="flex items-center">
              {loading ? (
                <div className="w-52 h-7 bg-progress-bg animate-pulse rounded"></div>
              ) : (
                <div className="flex items-center space-x-3">
                  <div className="p-2 bg-accent-blue/20 rounded-lg">
                    <svg xmlns="http://www.w3.org/2000/svg" className="w-6 h-6 text-accent-blue" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101" />
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M10.172 13.828a4 4 0 005.656 0l4-4a4 4 0 10-5.656-5.656l-1.102 1.101" />
                    </svg>
                  </div>
                  <h3 className="text-xl font-medium text-foreground">
                    {linkDetails?.name}
                  </h3>
                </div>
              )}
            </div>
            
            <button 
              type="button"
              onClick={onClose}
              className="text-text-secondary hover:text-foreground rounded-md focus:outline-none"
            >
              <span className="sr-only">Close</span>
              <svg className="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
          
          {loading ? (
            <div className="p-8 flex flex-col space-y-4 items-center justify-center">
              <div className="w-12 h-12 border-t-2 border-b-2 border-accent-blue rounded-full animate-spin"></div>
              <p className="text-text-secondary">Loading link details...</p>
            </div>
          ) : (
            <>
              {/* Link Info */}
              <div className="p-6 border-b border-card-border grid grid-cols-1 lg:grid-cols-3 gap-6">
                <div className="col-span-2">
                  <div className="flex flex-col space-y-2">
                    <div>
                      <span className="text-xs font-medium text-text-secondary uppercase">Short URL</span>
                      <div className="flex items-center mt-1">
                        <a 
                          href={linkDetails ? `https://${linkDetails.shortUrl}` : '#'}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="text-accent-blue hover:underline font-medium break-all"
                        >
                          {linkDetails?.shortUrl}
                        </a>
                        <button 
                          type="button"
                          className="ml-2 text-text-secondary hover:text-foreground"
                          onClick={() => linkDetails && navigator.clipboard.writeText(`https://${linkDetails.shortUrl}`)}
                        >
                          <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
                          </svg>
                        </button>
                      </div>
                    </div>
                    <div className="mt-3">
                      <span className="text-xs font-medium text-text-secondary uppercase">Original URL</span>
                      <div className="mt-1">
                        <a 
                          href={linkDetails?.originalUrl || '#'}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="text-foreground hover:underline break-all"
                        >
                          {linkDetails?.originalUrl}
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
                <div>
                  <div className="flex flex-col space-y-3">
                    <div>
                      <span className="text-xs font-medium text-text-secondary uppercase">Created By</span>
                      <p className="mt-1 text-foreground">{linkDetails?.creator}</p>
                    </div>
                    <div>
                      <span className="text-xs font-medium text-text-secondary uppercase">Created At</span>
                      <p className="mt-1 text-foreground">{linkDetails?.createdAt}</p>
                    </div>
                    <div>
                      <span className="text-xs font-medium text-text-secondary uppercase">Status</span>
                      <div className="mt-1">
                        {linkDetails && (
                          <span
                            className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                            ${linkDetails.status === 'active' ? 'bg-green-500/10 text-accent-green' : 
                              linkDetails.status === 'inactive' ? 'bg-gray-500/10 text-text-secondary' :
                              'bg-red-500/10 text-accent-red'
                            }`}
                          >
                            {linkDetails.status.charAt(0).toUpperCase() + linkDetails.status.slice(1)}
                          </span>
                        )}
                      </div>
                    </div>
                    {linkDetails?.tags && linkDetails.tags.length > 0 && (
                      <div>
                        <span className="text-xs font-medium text-text-secondary uppercase">Tags</span>
                        <div className="mt-1 flex flex-wrap gap-2">
                          {linkDetails.tags.map((tag) => (
                            <span 
                              key={tag} 
                              className="inline-flex items-center px-2 py-0.5 text-xs font-medium bg-blue-500/10 rounded-full text-accent-blue"
                            >
                              {tag}
                            </span>
                          ))}
                        </div>
                      </div>
                    )}
                  </div>
                </div>
              </div>
              
              {/* Metrics Overview */}
              {linkDetails && (
                <div className="p-6 border-b border-card-border">
                  <h4 className="text-lg font-medium text-foreground mb-4">Performance Metrics</h4>
                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                    {/* Total Visits */}
                    <div className="bg-card-bg p-4 rounded-lg border border-card-border">
                      <div className="flex items-center justify-between">
                        <h5 className="text-sm font-medium text-text-secondary">Total Visits</h5>
                        <span 
                          className={`inline-flex items-center text-xs font-medium rounded-full px-2 py-0.5
                          ${linkDetails.visitChange >= 0 
                            ? 'bg-green-500/10 text-accent-green' 
                            : 'bg-red-500/10 text-accent-red'
                          }`}
                        >
                          <svg 
                            className={`w-3 h-3 mr-1 ${linkDetails.visitChange >= 0 ? 'text-accent-green' : 'text-accent-red transform rotate-180'}`}
                            fill="currentColor" 
                            viewBox="0 0 20 20" 
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path fillRule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clipRule="evenodd" />
                          </svg>
                          {Math.abs(linkDetails.visitChange)}%
                        </span>
                      </div>
                      <div className="mt-2">
                        <p className="text-2xl font-bold text-foreground">{linkDetails.visits.toLocaleString()}</p>
                      </div>
                    </div>
                    
                    {/* Unique Visitors */}
                    <div className="bg-card-bg p-4 rounded-lg border border-card-border">
                      <div className="flex items-center justify-between">
                        <h5 className="text-sm font-medium text-text-secondary">Unique Visitors</h5>
                        <span 
                          className={`inline-flex items-center text-xs font-medium rounded-full px-2 py-0.5
                          ${linkDetails.uniqueVisitorsChange >= 0 
                            ? 'bg-green-500/10 text-accent-green' 
                            : 'bg-red-500/10 text-accent-red'
                          }`}
                        >
                          <svg 
                            className={`w-3 h-3 mr-1 ${linkDetails.uniqueVisitorsChange >= 0 ? 'text-accent-green' : 'text-accent-red transform rotate-180'}`}
                            fill="currentColor" 
                            viewBox="0 0 20 20" 
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path fillRule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clipRule="evenodd" />
                          </svg>
                          {Math.abs(linkDetails.uniqueVisitorsChange)}%
                        </span>
                      </div>
                      <div className="mt-2">
                        <p className="text-2xl font-bold text-foreground">{linkDetails.uniqueVisitors.toLocaleString()}</p>
                      </div>
                    </div>
                    
                    {/* Average Time */}
                    <div className="bg-card-bg p-4 rounded-lg border border-card-border">
                      <div className="flex items-center justify-between">
                        <h5 className="text-sm font-medium text-text-secondary">Average Time</h5>
                        <span 
                          className={`inline-flex items-center text-xs font-medium rounded-full px-2 py-0.5
                          ${linkDetails.avgTimeChange >= 0 
                            ? 'bg-green-500/10 text-accent-green' 
                            : 'bg-red-500/10 text-accent-red'
                          }`}
                        >
                          <svg 
                            className={`w-3 h-3 mr-1 ${linkDetails.avgTimeChange >= 0 ? 'text-accent-green' : 'text-accent-red transform rotate-180'}`}
                            fill="currentColor" 
                            viewBox="0 0 20 20" 
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path fillRule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clipRule="evenodd" />
                          </svg>
                          {Math.abs(linkDetails.avgTimeChange)}%
                        </span>
                      </div>
                      <div className="mt-2">
                        <p className="text-2xl font-bold text-foreground">{linkDetails.avgTime}</p>
                      </div>
                    </div>
                    
                    {/* Conversion Rate */}
                    <div className="bg-card-bg p-4 rounded-lg border border-card-border">
                      <div className="flex items-center justify-between">
                        <h5 className="text-sm font-medium text-text-secondary">Conversion Rate</h5>
                        <span 
                          className={`inline-flex items-center text-xs font-medium rounded-full px-2 py-0.5
                          ${linkDetails.conversionChange >= 0 
                            ? 'bg-green-500/10 text-accent-green' 
                            : 'bg-red-500/10 text-accent-red'
                          }`}
                        >
                          <svg 
                            className={`w-3 h-3 mr-1 ${linkDetails.conversionChange >= 0 ? 'text-accent-green' : 'text-accent-red transform rotate-180'}`}
                            fill="currentColor" 
                            viewBox="0 0 20 20" 
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path fillRule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clipRule="evenodd" />
                          </svg>
                          {Math.abs(linkDetails.conversionChange)}%
                        </span>
                      </div>
                      <div className="mt-2">
                        <p className="text-2xl font-bold text-foreground">{linkDetails.conversionRate}%</p>
                      </div>
                    </div>
                  </div>
                </div>
              )}
              
              {/* Tabs Navigation */}
              <div className="border-b border-card-border">
                <nav className="flex -mb-px">
                  <button
                    onClick={() => setActiveTab('overview')}
                    className={`py-4 px-6 font-medium text-sm border-b-2 ${
                      activeTab === 'overview'
                        ? 'border-accent-blue text-accent-blue'
                        : 'border-transparent text-text-secondary hover:text-foreground hover:border-card-border'
                    }`}
                  >
                    Overview
                  </button>
                  <button
                    onClick={() => setActiveTab('referrers')}
                    className={`py-4 px-6 font-medium text-sm border-b-2 ${
                      activeTab === 'referrers'
                        ? 'border-accent-blue text-accent-blue'
                        : 'border-transparent text-text-secondary hover:text-foreground hover:border-card-border'
                    }`}
                  >
                    Referrers
                  </button>
                  <button
                    onClick={() => setActiveTab('devices')}
                    className={`py-4 px-6 font-medium text-sm border-b-2 ${
                      activeTab === 'devices'
                        ? 'border-accent-blue text-accent-blue'
                        : 'border-transparent text-text-secondary hover:text-foreground hover:border-card-border'
                    }`}
                  >
                    Devices
                  </button>
                  <button
                    onClick={() => setActiveTab('locations')}
                    className={`py-4 px-6 font-medium text-sm border-b-2 ${
                      activeTab === 'locations'
                        ? 'border-accent-blue text-accent-blue'
                        : 'border-transparent text-text-secondary hover:text-foreground hover:border-card-border'
                    }`}
                  >
                    Locations
                  </button>
                </nav>
              </div>
              
              {/* Tab Content */}
              <div className="p-6">
                {activeTab === 'overview' && (
                  <div className="text-center py-12">
                    <svg className="mx-auto h-12 w-12 text-text-secondary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                    </svg>
                    <h3 className="mt-2 text-sm font-medium text-foreground">No chart data available</h3>
                    <p className="mt-1 text-sm text-text-secondary">
                      Charts and detailed analytics would appear here.
                    </p>
                  </div>
                )}
                
                {activeTab === 'referrers' && (
                  <div className="text-center py-12">
                    <svg className="mx-auto h-12 w-12 text-text-secondary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M13 10V3L4 14h7v7l9-11h-7z" />
                    </svg>
                    <h3 className="mt-2 text-sm font-medium text-foreground">No referrer data available</h3>
                    <p className="mt-1 text-sm text-text-secondary">
                      Information about traffic sources would appear here.
                    </p>
                  </div>
                )}
                
                {activeTab === 'devices' && (
                  <div className="text-center py-12">
                    <svg className="mx-auto h-12 w-12 text-text-secondary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                    </svg>
                    <h3 className="mt-2 text-sm font-medium text-foreground">No device data available</h3>
                    <p className="mt-1 text-sm text-text-secondary">
                      Breakdown of devices used to access the link would appear here.
                    </p>
                  </div>
                )}
                
                {activeTab === 'locations' && (
                  <div className="text-center py-12">
                    <svg className="mx-auto h-12 w-12 text-text-secondary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                    </svg>
                    <h3 className="mt-2 text-sm font-medium text-foreground">No location data available</h3>
                    <p className="mt-1 text-sm text-text-secondary">
                      Geographic distribution of visitors would appear here.
                    </p>
                  </div>
                )}
              </div>
              
              {/* Footer */}
              <div className="px-4 py-3 bg-card-bg flex justify-end border-t border-card-border">
                <button
                  type="button"
                  onClick={onClose}
                  className="px-4 py-2 text-sm font-medium text-text-secondary bg-card-bg border border-card-border rounded-md shadow-sm hover:bg-card-bg/80 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-blue"
                >
                  Close
                </button>
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}