// app/components/admin/packages/WebsiteSelector.tsx
'use client';

import { useState, useEffect, useRef, useCallback } from 'react';

interface Website {
  id: string;
  name: string;
  domain: string;
  da: number;
  status: string;
}

interface PackageWebsite {
  id: string;
  website_id: string;
  website_name: string;
  website_url: string;
  website_da: number;
}

interface WebsiteSelectorProps {
  selectedWebsiteIds: string[];
  onChange: (ids: string[]) => void;
  initialWebsites?: PackageWebsite[];
}

function useDebounce<T>(value: T, delay: number): T {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const timer = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);
  return debounced;
}

const getDAColor = (da: number) => {
  if (da >= 70) return 'bg-var-success-bg text-var-success-text';
  if (da >= 50) return 'bg-var-warning-bg text-var-warning-text';
  if (da >= 30) return 'bg-var-info-bg text-var-info-text';
  return 'bg-var-danger-bg text-var-danger-text';
};

// Helper function to convert PackageWebsite to Website format
const convertToWebsite = (item: PackageWebsite): Website => ({
  id: item.website_id,
  name: item.website_name,
  domain: item.website_url,
  da: item.website_da,
  status: 'active'
});

export default function WebsiteSelector({ selectedWebsiteIds, onChange, initialWebsites }: WebsiteSelectorProps) {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState<Website[]>([]);
  const [selectedWebsites, setSelectedWebsites] = useState<Website[]>([]);
  const [searching, setSearching] = useState(false);
  const [loadingSelected, setLoadingSelected] = useState(false);
  const [hasSearched, setHasSearched] = useState(false);
  const abortRef = useRef<AbortController | null>(null);
  const hasInitialized = useRef(false);

  const debouncedQuery = useDebounce(query, 300);

  // Initialize selected websites from initialWebsites prop (for edit mode)
  useEffect(() => {
    if (initialWebsites && initialWebsites.length > 0 && !hasInitialized.current) {
      const converted = initialWebsites.map(convertToWebsite);
      setSelectedWebsites(converted);
      hasInitialized.current = true;
    }
  }, [initialWebsites]);

  // Fetch selected websites by ID when selectedWebsiteIds changes and no initialWebsites
  useEffect(() => {
    if (selectedWebsiteIds.length === 0) {
      setSelectedWebsites([]);
      return;
    }

    // If we already have initialWebsites and they match the IDs, don't fetch again
    if (initialWebsites && initialWebsites.length === selectedWebsiteIds.length) {
      const allIdsMatch = initialWebsites.every(ws => 
        selectedWebsiteIds.includes(ws.website_id)
      );
      if (allIdsMatch) return;
    }

    const fetchSelected = async () => {
      setLoadingSelected(true);
      try {
        const ids = selectedWebsiteIds.join(',');
        const res = await fetch(`/api/backend/admin/packages/websites?ids=${ids}`);
        if (res.ok) {
          const data = await res.json();
          const converted = (data.websites || []).map(convertToWebsite);
          setSelectedWebsites(converted);
        }
      } catch (err) {
        console.error('Failed to fetch selected websites', err);
      } finally {
        setLoadingSelected(false);
      }
    };

    // Only fetch if we don't have initialWebsites or if we need to update
    if (!initialWebsites) {
      fetchSelected();
    }
  }, [selectedWebsiteIds, initialWebsites]);

  // Server-side search on debounced query
  useEffect(() => {
    if (!debouncedQuery.trim()) {
      setResults([]);
      setHasSearched(false);
      return;
    }

    if (abortRef.current) abortRef.current.abort();
    abortRef.current = new AbortController();

    const search = async () => {
      setSearching(true);
      setHasSearched(true);
      try {
        const res = await fetch(
          `/api/backend/admin/packages/webistes?search=${encodeURIComponent(debouncedQuery)}&limit=50`,
          { signal: abortRef.current!.signal }
        );
        if (res.ok) {
          const data = await res.json();
          setResults(data.websites || []);
        }
      } catch (err: unknown) {
        if (err instanceof Error && err.name !== 'AbortError') {
          console.error('Search failed', err);
        }
      } finally {
        setSearching(false);
      }
    };

    search();
  }, [debouncedQuery]);

  const handleToggle = useCallback((website: Website) => {
    const isSelected = selectedWebsiteIds.includes(website.id);

    if (isSelected) {
      setSelectedWebsites(prev => prev.filter(w => w.id !== website.id));
      onChange(selectedWebsiteIds.filter(id => id !== website.id));
    } else {
      setSelectedWebsites(prev => {
        if (prev.find(w => w.id === website.id)) return prev;
        return [...prev, website];
      });
      onChange([...selectedWebsiteIds, website.id]);
    }
  }, [selectedWebsiteIds, onChange]);

  const handleRemoveSelected = useCallback((websiteId: string) => {
    setSelectedWebsites(prev => prev.filter(w => w.id !== websiteId));
    onChange(selectedWebsiteIds.filter(id => id !== websiteId));
  }, [selectedWebsiteIds, onChange]);

  return (
    <div className="space-y-4">

      {/* Selected Websites */}
      <div>
        <div className="flex items-center justify-between mb-2">
          <label className="text-sm font-medium text-var-text">
            Selected Websites
            <span className="ml-2 px-2 py-0.5 text-xs font-semibold bg-var-primary-muted text-var-primary-text rounded-full">
              {selectedWebsiteIds.length}
            </span>
          </label>
        </div>

        {loadingSelected ? (
          <div className="flex items-center gap-2 text-sm text-var-text-muted py-2">
            <svg className="animate-spin h-4 w-4 text-var-primary" fill="none" viewBox="0 0 24 24">
              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
            </svg>
            Loading selected websites...
          </div>
        ) : selectedWebsites.length === 0 ? (
          <div className="text-sm text-var-text-muted py-2 px-3 border border-dashed border-var-border rounded-xl text-center">
            No websites selected yet
          </div>
        ) : (
          <div className="flex flex-wrap gap-2">
            {selectedWebsites.map(website => (
              <div
                key={website.id}
                className="inline-flex items-center gap-2 px-3 py-1.5 bg-var-primary-muted border border-var-border rounded-lg text-sm"
              >
                <span className="font-medium text-var-primary-text">{website.name}</span>
                <span className={`px-1.5 py-0.5 text-xs font-medium rounded-full ${getDAColor(website.da)}`}>
                  DA {website.da}
                </span>
                <button
                  type="button"
                  onClick={() => handleRemoveSelected(website.id)}
                  className="text-var-text-muted hover:text-var-danger transition-colors ml-1"
                  aria-label={`Remove ${website.name}`}
                >
                  <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M6 18L18 6M6 6l12 12" />
                  </svg>
                </button>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Search Input */}
      <div className="relative">
        <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
          {searching ? (
            <svg className="animate-spin h-4 w-4 text-var-primary" fill="none" viewBox="0 0 24 24">
              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
            </svg>
          ) : (
            <svg className="h-4 w-4 text-var-text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
          )}
        </div>
        <input
          type="text"
          placeholder="Search websites by name or domain..."
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          className="block w-full pl-10 pr-3 py-2 bg-var-input border border-var-border rounded-xl focus:ring-2 focus:ring-var-primary focus:border-var-primary transition-colors duration-200 text-sm text-var-input placeholder-var-input"
        />
        {query && (
          <button
            type="button"
            onClick={() => setQuery('')}
            className="absolute inset-y-0 right-0 pr-3 flex items-center text-var-text-muted hover:text-var-text"
          >
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        )}
      </div>

      {/* Search Results */}
      {!query.trim() && !hasSearched ? (
        <div className="text-center py-8 text-sm text-var-text-muted border border-dashed border-var-border rounded-xl">
          <svg className="w-8 h-8 mx-auto mb-2 text-var-text-disabled" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
          </svg>
          Type to search websites
        </div>
      ) : hasSearched && results.length === 0 && !searching ? (
        <div className="text-center py-8 text-sm text-var-text-muted border border-var-border rounded-xl">
          No websites found for <span className="font-medium text-var-text">{query}</span>
        </div>
      ) : results.length > 0 ? (
        <div className="border border-var-border rounded-xl overflow-hidden">
          <div className="bg-var-surface-hover px-4 py-2.5 border-b border-var-border flex items-center justify-between">
            <span className="text-xs font-medium text-var-text-muted uppercase tracking-wide">
              Results ({results.length}{results.length === 50 ? '+' : ''})
            </span>
            <span className="text-xs text-var-text-muted">Click to select</span>
          </div>
          <div className="divide-y divide-var-border max-h-72 overflow-y-auto">
            {results.map((website) => {
              const isSelected = selectedWebsiteIds.includes(website.id);
              return (
                <div
                  key={website.id}
                  onClick={() => handleToggle(website)}
                  className={`px-4 py-3 flex items-center justify-between cursor-pointer transition-colors duration-150 ${
                    isSelected ? 'bg-var-primary-muted hover:bg-var-primary-muted' : 'hover:bg-var-surface-hover'
                  }`}
                >
                  <div className="flex items-center gap-3 min-w-0">
                    <div className={`w-4 h-4 shrink-0 rounded border-2 flex items-center justify-center transition-colors ${
                      isSelected
                        ? 'bg-var-primary border-var-primary'
                        : 'border-var-border bg-var-input'
                    }`}>
                      {isSelected && (
                        <svg className="w-2.5 h-2.5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
                        </svg>
                      )}
                    </div>
                    <div className="min-w-0">
                      <p className="text-sm font-medium text-var-text truncate">{website.name}</p>
                      <p className="text-xs text-var-text-muted truncate">{website.domain}</p>
                    </div>
                  </div>
                  <span className={`ml-3 shrink-0 px-2 py-1 text-xs font-medium rounded-full ${getDAColor(website.da)}`}>
                    DA {website.da}
                  </span>
                </div>
              );
            })}
          </div>
        </div>
      ) : null}
    </div>
  );
}