import { useState, useEffect, useMemo } from 'react';

interface Job {
  id: string;
  company: string;
  position: string;
  location: string;
  remote: boolean;
  salary: string;
  description: string;
  applyUrl: string;
  source: string;
  sourceUrl: string;
  postedAt: string;
  tags: string[];
  companyIcon: string;
}

interface JobsData {
  lastUpdated: string;
  totalJobs: number;
  sources: string[];
  jobs: Job[];
}

type LocationFilter = 'all' | 'remote' | 'onsite';
type SortOption = 'recent' | 'company' | 'salary';

const SOURCE_COLORS: Record<string, string> = {
  HackerNews: 'bg-orange-500/15 text-orange-400 border-orange-500/20',
  RemoteOK: 'bg-blue-500/15 text-blue-400 border-blue-500/20',
  WeWorkRemotely: 'bg-emerald-500/15 text-emerald-400 border-emerald-500/20',
  Anthropic: 'bg-purple-500/15 text-purple-400 border-purple-500/20',
};

function useGlobalAuth() {
  const [state, setState] = useState<{ isSignedIn: boolean; isLoaded: boolean }>({
    isSignedIn: false, isLoaded: false,
  });

  useEffect(() => {
    function check() {
      const clerk = (window as any).Clerk;
      if (clerk?.loaded) {
        const signedIn = !!clerk.user;
        setState((prev) => {
          if (prev.isLoaded && prev.isSignedIn === signedIn) return prev;
          return { isSignedIn: signedIn, isLoaded: true };
        });
      }
    }
    check();
    const interval = setInterval(check, 500);
    const handleChange = () => check();
    window.addEventListener('clerk:session', handleChange);
    return () => { clearInterval(interval); window.removeEventListener('clerk:session', handleChange); };
  }, []);

  return state;
}

function timeAgo(dateStr: string): string {
  if (!dateStr) return '';
  try {
    const date = new Date(dateStr);
    if (isNaN(date.getTime())) return '';
    const now = new Date();
    const days = Math.floor((now.getTime() - date.getTime()) / 86400000);
    if (days < 0 || isNaN(days)) return '';
    if (days === 0) return 'Today';
    if (days === 1) return '1d ago';
    if (days < 30) return `${days}d ago`;
    if (days < 60) return '1mo ago';
    return `${Math.floor(days / 30)}mo ago`;
  } catch {
    return '';
  }
}

function safeUrl(url: string): string {
  return /^https?:\/\//i.test(url) ? url : '#';
}

export default function JobsView() {
  const [data, setData] = useState<JobsData | null>(null);
  const [loading, setLoading] = useState(true);
  const [locationFilter, setLocationFilter] = useState<LocationFilter>('all');
  const [sourceFilter, setSourceFilter] = useState<string>('all');
  const [companyFilter, setCompanyFilter] = useState<string>('all');
  const [selectedTag, setSelectedTag] = useState<string>('all');
  const [sortBy, setSortBy] = useState<SortOption>('recent');
  const [searchQuery, setSearchQuery] = useState('');
  const { isSignedIn, isLoaded } = useGlobalAuth();

  useEffect(() => {
    fetch('/claude-jobs.json')
      .then((r) => r.json())
      .then((d) => { setData(d); setLoading(false); })
      .catch(() => setLoading(false));
  }, []);

  // Close dropdown when clicking outside
  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      const target = e.target as HTMLElement;
      if (!target.closest('.company-dropdown')) {
        setIsCompanyDropdownOpen(false);
      }
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  const filteredJobs = useMemo(() => {
    if (!data) return [];
    let filtered = data.jobs.filter((job) => {
      if (locationFilter === 'remote' && !job.remote) return false;
      if (locationFilter === 'onsite' && job.remote) return false;
      if (sourceFilter !== 'all' && job.source !== sourceFilter) return false;
      if (companyFilter !== 'all' && job.company !== companyFilter) return false;
      if (selectedTag !== 'all' && !job.tags.includes(selectedTag)) return false;
      if (searchQuery) {
        const q = searchQuery.toLowerCase();
        const text = `${job.company} ${job.position} ${job.location} ${job.tags.join(' ')}`.toLowerCase();
        if (!text.includes(q)) return false;
      }
      return true;
    });

    // Sort jobs
    filtered.sort((a, b) => {
      if (sortBy === 'recent') {
        return new Date(b.postedAt || 0).getTime() - new Date(a.postedAt || 0).getTime();
      } else if (sortBy === 'company') {
        return a.company.localeCompare(b.company);
      } else if (sortBy === 'salary') {
        // Sort by salary (jobs with salary first)
        if (a.salary && !b.salary) return -1;
        if (!a.salary && b.salary) return 1;
        return 0;
      }
      return 0;
    });

    return filtered;
  }, [data, locationFilter, sourceFilter, companyFilter, selectedTag, sortBy, searchQuery]);

  // Get unique companies and tags for filters
  const companies = useMemo(() => {
    if (!data) return [];
    const uniqueCompanies = Array.from(new Set(data.jobs.map(j => j.company))).sort();
    return uniqueCompanies;
  }, [data]);

  // Get company logo for a given company name
  const getCompanyLogo = (companyName: string): string => {
    if (!data) return '';
    const job = data.jobs.find(j => j.company === companyName);
    // If companyIcon exists in data, use it
    if (job?.companyIcon) return job.companyIcon;
    
    // Otherwise, try to fetch from Clearbit Logo API
    // Format: https://logo.clearbit.com/{domain}
    const domain = companyName.toLowerCase()
      .replace(/\s+/g, '')
      .replace(/[^a-z0-9]/g, '');
    return `https://logo.clearbit.com/${domain}.com`;
  };

  const allTags = useMemo(() => {
    if (!data) return [];
    const tagSet = new Set<string>();
    data.jobs.forEach(job => job.tags.forEach(tag => tagSet.add(tag)));
    return Array.from(tagSet).sort();
  }, [data]);

  // Custom dropdown state
  const [isCompanyDropdownOpen, setIsCompanyDropdownOpen] = useState(false);

  function handleJobClick(e: React.MouseEvent, job: Job) {
    if (!isLoaded) {
      e.preventDefault();
      return;
    }
    if (!isSignedIn) {
      e.preventDefault();
      (window as any).Clerk?.openSignIn?.();
    }
    // If signed in, let the <a> navigate normally
  }

  if (loading) {
    return (
      <div className="px-6 py-20 flex flex-col items-center gap-3">
        <div className="w-5 h-5 border-2 border-[var(--color-text-tertiary)] border-t-transparent rounded-full animate-spin" />
        <span className="text-[13px] text-[var(--color-text-tertiary)]">Loading jobs...</span>
      </div>
    );
  }

  if (!data || data.jobs.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center px-6 py-24">
        {/* Icon */}
        <div className="w-20 h-20 rounded-2xl bg-[var(--color-surface-2)] border border-[var(--color-border)] flex items-center justify-center mb-6">
          <svg className="w-10 h-10 text-[var(--color-text-tertiary)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5">
            <rect x="2" y="7" width="20" height="14" rx="2" ry="2" />
            <path d="M16 7V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v2" />
            <line x1="12" y1="12" x2="12" y2="12.01" />
          </svg>
        </div>
        {/* Message */}
        <h3 className="text-[15px] font-semibold text-[var(--color-text-primary)] mb-2">No jobs available yet</h3>
        <p className="text-[13px] text-[var(--color-text-secondary)] text-center max-w-md leading-relaxed">
          We're currently curating exciting opportunities for AI developers. Check back soon for new job postings!
        </p>
      </div>
    );
  }

  const remoteCount = data.jobs.filter((j) => j.remote).length;
  const onsiteCount = data.jobs.length - remoteCount;
  const showAuthGate = isLoaded && !isSignedIn;

  return (
    <div>
      {/* Header */}
      <div className="px-6 pt-5 pb-2">
        <h1 className="text-lg font-semibold text-[var(--color-text-primary)] flex items-center gap-2">
          Jobs Requiring Claude Code
          <picture>
              <source srcSet="/claude-code-logo.webp" type="image/webp" />
              <img src="/claude-code-logo.png" alt="Claude Code" className="w-6 h-6 inline-block" loading="lazy" />
            </picture>
        </h1>
        <p className="text-[13px] text-[var(--color-text-tertiary)] mt-1">
          Companies actively hiring developers who use Claude Code in their workflow.
          Updated daily from HackerNews "Who is Hiring", RemoteOK, and more.
        </p>
      </div>

      {/* Auth banner for non-signed-in users */}
      {showAuthGate && (
        <div className="mx-6 mt-2 mb-1 bg-gradient-to-r from-purple-500/10 via-blue-500/10 to-emerald-500/10 border border-[var(--color-border)] rounded-lg px-4 py-3 flex items-center gap-3">
          <svg className="w-5 h-5 text-purple-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5">
            <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
            <path d="M7 11V7a5 5 0 0110 0v4" />
          </svg>
          <div className="flex-1">
            <p className="text-[13px] text-[var(--color-text-primary)]">
              <span className="font-medium">Sign in</span>
              <span className="text-[var(--color-text-secondary)]"> to view job details and apply to positions</span>
            </p>
          </div>
          <button
            onClick={() => (window as any).Clerk?.openSignIn?.()}
            className="px-3 py-1.5 bg-[var(--color-surface-3)] hover:bg-[var(--color-surface-4)] text-[12px] font-medium text-[var(--color-text-primary)] rounded-md transition-colors"
          >
            Sign In
          </button>
        </div>
      )}

      {/* Stats cards */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-3 px-6 py-4">
        {[
          { label: 'Total Jobs', value: String(data.totalJobs) },
          { label: 'Remote', value: String(remoteCount) },
          { label: 'On-site', value: String(onsiteCount) },
          { label: 'Sources', value: String(data.sources.length) },
        ].map((s) => (
          <div key={s.label} className="bg-[var(--color-card-bg)] border border-[var(--color-border)] rounded-lg px-4 py-3">
            <div className="text-[18px] font-semibold text-[var(--color-text-primary)] tabular-nums">{s.value}</div>
            <div className="text-[11px] text-[var(--color-text-tertiary)] mt-0.5">{s.label}</div>
          </div>
        ))}
      </div>

      {/* Divider */}
      <div className="border-t border-[var(--color-border)]" />

      {/* Filter bar - Enhanced */}
      <div className="px-6 py-4 space-y-3">
        {/* Top row: Location, Source, Company, Sort */}
        <div className="flex flex-wrap items-center gap-2">
          {/* Location filter */}
          <div className="flex items-center gap-1 bg-[var(--color-surface-2)] rounded-lg p-0.5">
            {(['all', 'remote', 'onsite'] as LocationFilter[]).map((loc) => (
              <button
                key={loc}
                onClick={() => setLocationFilter(loc)}
                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-[12px] font-medium transition-all ${
                  locationFilter === loc
                    ? 'bg-[var(--color-surface-3)] text-[var(--color-text-primary)] shadow-sm'
                    : 'text-[var(--color-text-tertiary)] hover:text-[var(--color-text-secondary)]'
                }`}
              >
                {loc === 'all' ? (
                  <>
                    <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
                      <path strokeLinecap="round" strokeLinejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                    </svg>
                    All Locations
                  </>
                ) : loc === 'remote' ? (
                  <>
                    <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
                      <circle cx="12" cy="12" r="10" />
                      <path strokeLinecap="round" strokeLinejoin="round" d="M2 12h20M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z" />
                    </svg>
                    Remote
                  </>
                ) : (
                  <>
                    <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
                      <path strokeLinecap="round" strokeLinejoin="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                    </svg>
                    On-site
                  </>
                )}
              </button>
            ))}
          </div>

          {/* Source filter dropdown */}
          <div className="relative">
            <select
              value={sourceFilter}
              onChange={(e) => setSourceFilter(e.target.value)}
              className="appearance-none bg-[var(--color-surface-2)] border border-[var(--color-border)] rounded-lg text-[12px] font-medium text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] px-3 py-1.5 pr-8 outline-none cursor-pointer transition-colors"
            >
              <option value="all">All Sources</option>
              {data.sources.map((src) => (
                <option key={src} value={src}>{src}</option>
              ))}
            </select>
            <svg className="absolute right-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-[var(--color-text-tertiary)] pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
              <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
            </svg>
          </div>

          {/* Company filter dropdown - Custom with logos */}
          <div className="relative company-dropdown">
            <button
              onClick={() => setIsCompanyDropdownOpen(!isCompanyDropdownOpen)}
              className="flex items-center gap-2 bg-[var(--color-surface-2)] border border-[var(--color-border)] rounded-lg text-[12px] font-medium text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] pl-3 pr-8 py-1.5 outline-none cursor-pointer transition-colors min-w-[180px]"
            >
              {companyFilter === 'all' ? (
                <>
                  <svg className="w-3.5 h-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                  </svg>
                  <span>All Companies ({companies.length})</span>
                </>
              ) : (
                <>
                  <div className="w-4 h-4 rounded bg-[var(--color-surface-3)] border border-[var(--color-border)] flex items-center justify-center shrink-0 overflow-hidden">
                    <img
                      src={getCompanyLogo(companyFilter)}
                      alt=""
                      className="w-3 h-3 object-contain"
                      onError={(e) => {
                        const target = e.target as HTMLImageElement;
                        target.style.display = 'none';
                        const fallback = target.nextElementSibling as HTMLElement;
                        if (fallback) fallback.style.display = 'flex';
                      }}
                    />
                    <span className="text-[8px] font-bold text-[var(--color-text-tertiary)]" style={{ display: 'none' }}>
                      {companyFilter.charAt(0).toUpperCase()}
                    </span>
                  </div>
                  <span className="truncate">{companyFilter}</span>
                </>
              )}
              <svg className="absolute right-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-[var(--color-text-tertiary)] pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
                <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
              </svg>
            </button>
            
            {/* Dropdown menu */}
            {isCompanyDropdownOpen && (
              <div className="absolute top-full left-0 mt-1 w-72 max-h-80 overflow-y-auto bg-[var(--color-surface-2)] border border-[var(--color-border)] rounded-lg shadow-lg z-50">
                <button
                  onClick={() => {
                    setCompanyFilter('all');
                    setIsCompanyDropdownOpen(false);
                  }}
                  className={`w-full flex items-center gap-2.5 px-3 py-2 text-[12px] text-left transition-colors ${
                    companyFilter === 'all'
                      ? 'bg-[var(--color-surface-3)] text-[var(--color-text-primary)] font-medium'
                      : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-3)] hover:text-[var(--color-text-primary)]'
                  }`}
                >
                  <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                  </svg>
                  <span>All Companies ({companies.length})</span>
                </button>
                <div className="border-t border-[var(--color-border)] my-1" />
                {companies.map((company) => (
                  <button
                    key={company}
                    onClick={() => {
                      setCompanyFilter(company);
                      setIsCompanyDropdownOpen(false);
                    }}
                    className={`w-full flex items-center gap-2.5 px-3 py-2 text-[12px] text-left transition-colors ${
                      companyFilter === company
                        ? 'bg-[var(--color-surface-3)] text-[var(--color-text-primary)] font-medium'
                        : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-3)] hover:text-[var(--color-text-primary)]'
                    }`}
                  >
                    <div className="w-5 h-5 rounded bg-[var(--color-surface-3)] border border-[var(--color-border)] flex items-center justify-center shrink-0 overflow-hidden">
                      <img
                        src={getCompanyLogo(company)}
                        alt=""
                        className="w-4 h-4 object-contain"
                        onError={(e) => {
                          const target = e.target as HTMLImageElement;
                          target.style.display = 'none';
                          const fallback = target.nextElementSibling as HTMLElement;
                          if (fallback) fallback.style.display = 'flex';
                        }}
                      />
                      <span className="text-[9px] font-bold text-[var(--color-text-tertiary)]" style={{ display: 'none' }}>
                        {company.charAt(0).toUpperCase()}
                      </span>
                    </div>
                    <span className="truncate">{company}</span>
                  </button>
                ))}
              </div>
            )}
          </div>

          {/* Sort dropdown */}
          <div className="relative">
            <select
              value={sortBy}
              onChange={(e) => setSortBy(e.target.value as SortOption)}
              className="appearance-none bg-[var(--color-surface-2)] border border-[var(--color-border)] rounded-lg text-[12px] font-medium text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] pl-9 pr-8 py-1.5 outline-none cursor-pointer transition-colors"
            >
              <option value="recent">Most Recent</option>
              <option value="company">Company A-Z</option>
              <option value="salary">With Salary</option>
            </select>
            <svg className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-[var(--color-text-tertiary)] pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
              {sortBy === 'recent' ? (
                <path strokeLinecap="round" strokeLinejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
              ) : sortBy === 'company' ? (
                <path strokeLinecap="round" strokeLinejoin="round" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12" />
              ) : (
                <path strokeLinecap="round" strokeLinejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              )}
            </svg>
            <svg className="absolute right-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-[var(--color-text-tertiary)] pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
              <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
            </svg>
          </div>

          {/* Search */}
          <div className="ml-auto relative">
            <svg className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-[var(--color-text-tertiary)] pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
              <circle cx="11" cy="11" r="8" />
              <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-4.35-4.35" />
            </svg>
            <input
              type="text"
              placeholder="Search jobs..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="bg-[var(--color-surface-2)] border border-[var(--color-border)] rounded-lg text-[12px] text-[var(--color-text-primary)] placeholder:text-[var(--color-text-tertiary)] pl-9 pr-3 py-1.5 w-56 outline-none focus:border-[var(--color-border-hover)] transition-colors"
            />
            {searchQuery && (
              <button
                onClick={() => setSearchQuery('')}
                className="absolute right-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--color-text-tertiary)] hover:text-[var(--color-text-secondary)] transition-colors"
              >
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            )}
          </div>
        </div>

        {/* Bottom row: Tags filter */}
        {allTags.length > 0 && (
          <div className="flex items-center gap-2">
            <span className="text-[11px] font-medium text-[var(--color-text-tertiary)] uppercase tracking-wide">Tags:</span>
            <div className="flex items-center gap-1.5 flex-wrap">
              <button
                onClick={() => setSelectedTag('all')}
                className={`px-2.5 py-1 rounded-md text-[11px] font-medium transition-all ${
                  selectedTag === 'all'
                    ? 'bg-[var(--color-surface-3)] text-[var(--color-text-primary)] border border-[var(--color-border)]'
                    : 'bg-[var(--color-surface-2)] text-[var(--color-text-tertiary)] hover:text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-3)]'
                }`}
              >
                All
              </button>
              {allTags.slice(0, 12).map((tag) => (
                <button
                  key={tag}
                  onClick={() => setSelectedTag(tag)}
                  className={`px-2.5 py-1 rounded-md text-[11px] font-medium transition-all ${
                    selectedTag === tag
                      ? 'bg-blue-500/15 text-blue-400 border border-blue-500/30'
                      : 'bg-[var(--color-surface-2)] text-[var(--color-text-tertiary)] hover:text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-3)]'
                  }`}
                >
                  {tag}
                </button>
              ))}
              {allTags.length > 12 && (
                <span className="text-[11px] text-[var(--color-text-tertiary)] px-2">
                  +{allTags.length - 12} more
                </span>
              )}
            </div>
          </div>
        )}

        {/* Active filters indicator */}
        {(locationFilter !== 'all' || sourceFilter !== 'all' || companyFilter !== 'all' || selectedTag !== 'all' || searchQuery) && (
          <div className="flex items-center gap-2 pt-1">
            <span className="text-[11px] text-[var(--color-text-tertiary)]">Active filters:</span>
            <div className="flex items-center gap-1.5 flex-wrap">
              {locationFilter !== 'all' && (
                <span className="inline-flex items-center gap-1 text-[11px] bg-blue-500/15 text-blue-400 px-2 py-0.5 rounded-full">
                  {locationFilter}
                  <button onClick={() => setLocationFilter('all')} className="hover:text-blue-300">×</button>
                </span>
              )}
              {sourceFilter !== 'all' && (
                <span className="inline-flex items-center gap-1 text-[11px] bg-orange-500/15 text-orange-400 px-2 py-0.5 rounded-full">
                  {sourceFilter}
                  <button onClick={() => setSourceFilter('all')} className="hover:text-orange-300">×</button>
                </span>
              )}
              {companyFilter !== 'all' && (
                <span className="inline-flex items-center gap-1 text-[11px] bg-purple-500/15 text-purple-400 px-2 py-0.5 rounded-full">
                  {companyFilter}
                  <button onClick={() => setCompanyFilter('all')} className="hover:text-purple-300">×</button>
                </span>
              )}
              {selectedTag !== 'all' && (
                <span className="inline-flex items-center gap-1 text-[11px] bg-emerald-500/15 text-emerald-400 px-2 py-0.5 rounded-full">
                  {selectedTag}
                  <button onClick={() => setSelectedTag('all')} className="hover:text-emerald-300">×</button>
                </span>
              )}
              {searchQuery && (
                <span className="inline-flex items-center gap-1 text-[11px] bg-pink-500/15 text-pink-400 px-2 py-0.5 rounded-full">
                  "{searchQuery}"
                  <button onClick={() => setSearchQuery('')} className="hover:text-pink-300">×</button>
                </span>
              )}
              <button
                onClick={() => {
                  setLocationFilter('all');
                  setSourceFilter('all');
                  setCompanyFilter('all');
                  setSelectedTag('all');
                  setSearchQuery('');
                }}
                className="text-[11px] text-[var(--color-text-tertiary)] hover:text-[var(--color-text-secondary)] underline"
              >
                Clear all
              </button>
            </div>
          </div>
        )}
      </div>

      {/* Results count */}
      <div className="px-6 pb-3 flex items-center justify-between">
        <span className="text-[12px] font-medium text-[var(--color-text-secondary)]">
          Showing {filteredJobs.length} of {data.totalJobs} job{filteredJobs.length !== 1 ? 's' : ''}
        </span>
        {filteredJobs.length === 0 && (
          <button
            onClick={() => {
              setLocationFilter('all');
              setSourceFilter('all');
              setCompanyFilter('all');
              setSelectedTag('all');
              setSearchQuery('');
            }}
            className="text-[12px] text-blue-400 hover:text-blue-300 underline"
          >
            Reset filters
          </button>
        )}
      </div>

      {/* Job cards */}
      {filteredJobs.length === 0 ? (
        <div className="px-6 pb-8 flex flex-col items-center justify-center py-12">
          <div className="w-16 h-16 rounded-full bg-[var(--color-surface-2)] border border-[var(--color-border)] flex items-center justify-center mb-4">
            <svg className="w-8 h-8 text-[var(--color-text-tertiary)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5">
              <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
          </div>
          <h3 className="text-[14px] font-semibold text-[var(--color-text-primary)] mb-1">No jobs found</h3>
          <p className="text-[12px] text-[var(--color-text-tertiary)] text-center max-w-sm">
            Try adjusting your filters or search query to find more opportunities.
          </p>
        </div>
      ) : (
        <div className="px-6 pb-8 grid grid-cols-1 md:grid-cols-2 gap-3">
          {filteredJobs.map((job) => (
            <a
              key={job.id}
              href={isSignedIn ? safeUrl(job.applyUrl) : '#'}
              target={isSignedIn ? '_blank' : undefined}
              rel={isSignedIn ? 'noopener noreferrer' : undefined}
              onClick={(e) => handleJobClick(e, job)}
              className="block bg-[var(--color-card-bg)] border border-[var(--color-border)] rounded-lg p-4 hover:border-[var(--color-border-hover)] hover:bg-[var(--color-card-hover)] hover:shadow-lg transition-all group relative"
            >
              <div className="flex items-start gap-3">
                {/* Company icon - Enhanced with internet fallback */}
                <div className="w-12 h-12 rounded-lg bg-[var(--color-surface-2)] border border-[var(--color-border)] flex items-center justify-center shrink-0 overflow-hidden group-hover:border-[var(--color-border-hover)] transition-colors">
                  <img
                    src={job.companyIcon || getCompanyLogo(job.company)}
                    alt={job.company}
                    className="w-7 h-7 object-contain"
                    style={{ display: 'block' }}
                    onError={(e) => { 
                      const target = e.target as HTMLImageElement;
                      target.style.display = 'none';
                      const fallback = target.nextElementSibling as HTMLElement;
                      if (fallback) fallback.style.display = 'flex';
                    }}
                  />
                  <span 
                    className="text-[16px] font-bold text-[var(--color-text-tertiary)]"
                    style={{ display: 'none' }}
                  >
                    {job.company.charAt(0).toUpperCase()}
                  </span>
                </div>

                {/* Content */}
                <div className="flex-1 min-w-0">
                  <div className="flex items-start gap-2 flex-wrap">
                    <h3 className="text-[14px] font-semibold text-[var(--color-text-primary)] group-hover:text-[var(--color-text-primary)] transition-colors flex-1">
                      {job.position}
                    </h3>
                    {job.salary && (
                      <span className="flex items-center gap-1 text-[11px] font-semibold bg-emerald-500/15 text-emerald-400 px-2 py-1 rounded border border-emerald-500/20">
                        <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
                          <path strokeLinecap="round" strokeLinejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        {job.salary}
                      </span>
                    )}
                  </div>

                  <div className="flex items-center gap-2 mt-1.5 flex-wrap">
                    <span className="text-[13px] font-medium text-[var(--color-text-secondary)]">{job.company}</span>
                    <span className="text-[10px] text-[var(--color-text-tertiary)]">•</span>
                    <span className="text-[12px] text-[var(--color-text-tertiary)]">{job.location}</span>
                  </div>

                  <div className="flex items-center gap-1.5 mt-2 flex-wrap">
                    {job.remote && (
                      <span className="flex items-center gap-1 text-[10px] font-semibold bg-blue-500/15 text-blue-400 px-2 py-1 rounded border border-blue-500/20">
                        <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
                          <circle cx="12" cy="12" r="10" />
                          <path strokeLinecap="round" strokeLinejoin="round" d="M2 12h20M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z" />
                        </svg>
                        Remote
                      </span>
                    )}
                    <span className={`text-[10px] font-semibold px-2 py-1 rounded border ${SOURCE_COLORS[job.source] || 'bg-[var(--color-surface-3)] text-[var(--color-text-secondary)]'}`}>
                      {job.source}
                    </span>
                    {job.postedAt && (
                      <span className="flex items-center gap-1 text-[11px] text-[var(--color-text-tertiary)] ml-auto">
                        <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
                          <path strokeLinecap="round" strokeLinejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        {timeAgo(job.postedAt)}
                      </span>
                    )}
                  </div>

                  {job.description && (
                    <p className="text-[12px] text-[var(--color-text-secondary)] mt-2.5 line-clamp-2 leading-relaxed">{job.description}</p>
                  )}

                  {job.tags.length > 0 && (
                    <div className="flex items-center gap-1.5 mt-2.5 flex-wrap">
                      {job.tags.slice(0, 6).map((tag) => (
                        <span 
                          key={tag} 
                          className="text-[10px] text-[var(--color-text-secondary)] bg-[var(--color-surface-2)] px-2 py-0.5 rounded border border-[var(--color-border)] hover:border-[var(--color-border-hover)] transition-colors cursor-pointer"
                          onClick={(e) => {
                            e.preventDefault();
                            e.stopPropagation();
                            setSelectedTag(tag);
                          }}
                        >
                          {tag}
                        </span>
                      ))}
                      {job.tags.length > 6 && (
                        <span className="text-[10px] text-[var(--color-text-tertiary)]">
                          +{job.tags.length - 6}
                        </span>
                      )}
                    </div>
                  )}
                </div>

                {/* Right side: apply arrow or lock icon */}
                {showAuthGate ? (
                  <svg
                    className="w-4 h-4 text-[var(--color-text-tertiary)] shrink-0 mt-1"
                    fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}
                  >
                    <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
                    <path d="M7 11V7a5 5 0 0110 0v4" />
                  </svg>
                ) : (
                  <svg
                    className="w-4 h-4 text-[var(--color-text-tertiary)] group-hover:text-[var(--color-text-secondary)] group-hover:translate-x-0.5 group-hover:-translate-y-0.5 shrink-0 mt-1 transition-all"
                    fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}
                  >
                    <path strokeLinecap="round" strokeLinejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                  </svg>
                )}
              </div>
            </a>
          ))}
        </div>
      )}

      {/* Footer */}
      <div className="px-6 pb-6 text-center">
        <p className="text-[11px] text-[var(--color-text-tertiary)]">
          Last updated: {new Date(data.lastUpdated).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
          {' | '}Data sourced from HackerNews "Who is Hiring", RemoteOK, WeWorkRemotely, and Anthropic Careers
        </p>
      </div>
    </div>
  );
}