'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useState, useEffect } from 'react';

interface Domain {
  bucket: string;
  domain: string;
}

export function Sidebar() {
  const pathname = usePathname();
  const [domains, setDomains] = useState<Domain[]>([]);
  const [expandedDomains, setExpandedDomains] = useState<Set<string>>(new Set());
  const [totalEmails, setTotalEmails] = useState(0);

  useEffect(() => {
    // Fetch domains from API
    const auth = localStorage.getItem('auth');
    if (!auth) return;

    fetch('/api/domains', {
      headers: { Authorization: `Basic ${auth}` }
    })
      .then(res => res.json())
      .then(data => {
        setDomains(data);
      })
      .catch(err => console.error('Failed to fetch domains:', err));
  }, []);

  const toggleDomain = (bucket: string) => {
    setExpandedDomains(prev => {
      const next = new Set(prev);
      if (next.has(bucket)) {
        next.delete(bucket);
      } else {
        next.add(bucket);
      }
      return next;
    });
  };

  return (
    <aside className="fixed left-0 top-16 w-64 h-[calc(100vh-4rem)] bg-white border-r border-gray-200 overflow-y-auto">
      {/* Navigation */}
      <nav className="px-2 pt-4">
        {/* Inbox Overview */}
        <div className="mb-4">
          <Link
            href="/domains"
            className={`flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
              pathname === '/domains' ? 'bg-blue-50 text-blue-700' : 'hover:bg-gray-100'
            }`}
          >
            <svg className="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
            </svg>
            <span className="font-medium">All Mail</span>
          </Link>
        </div>

        {/* Domains Section */}
        <div className="mb-2 px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">
          Domains
        </div>
        <div className="space-y-1">
          {domains.map((domain, index) => (
            <div key={`${domain.bucket}-${index}`}>
              <Link
                href={`/mailboxes?bucket=${domain.bucket}`}
                className="w-full flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-100 text-left transition-colors"
              >
                <svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
                </svg>
                <span className="text-sm flex-1 truncate">{domain.domain}</span>
              </Link>
            </div>
          ))}
        </div>
      </nav>
    </aside>
  );
}