'use client';

import { ReactNode } from 'react';
import Link from 'next/link';
import { usePathname, useSearchParams } from 'next/navigation';

interface ImportTab {
  id: string;
  label: string;
  href: string;
  description: string;
}

interface ImportLayoutContentProps {
  children: ReactNode;
  title: string;
  description?: string;
}

const importTabs: ImportTab[] = [
  {
    id: 'manual',
    label: 'Manual Entry',
    href: '/add-story',
    description: 'Add a story by manually entering details'
  },
  {
    id: 'url',
    label: 'Import from URL',
    href: '/import',
    description: 'Import a single story from a website'
  },
  {
    id: 'epub',
    label: 'Import EPUB',
    href: '/import/epub',
    description: 'Import a story from an EPUB file'
  },
  {
    id: 'bulk',
    label: 'Bulk Import',
    href: '/import/bulk',
    description: 'Import multiple stories from URLs'
  }
];

export default function ImportLayoutContent({
  children,
  title,
  description
}: ImportLayoutContentProps) {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  // Determine active tab based on current path
  const activeTab = importTabs.find(tab => {
    if (tab.href === pathname) return true;
    if (tab.href === '/import' && pathname === '/import') return true;
    return false;
  });

  return (
    <>
      <div className="mb-8">
        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
          <div>
            <h1 className="text-3xl font-bold theme-header">{title}</h1>
            {description && (
              <p className="theme-text mt-2">{description}</p>
            )}
          </div>
          <Link
            href="/library"
            className="inline-flex items-center px-4 py-2 text-sm font-medium theme-button theme-border border rounded-lg hover:theme-button-hover transition-colors"
          >
            ← Back to Library
          </Link>
        </div>

        {/* Import Method Tabs */}
        <div className="border-b theme-border">
          <nav className="-mb-px flex space-x-8 overflow-x-auto">
            {importTabs.map((tab) => {
              const isActive = activeTab?.id === tab.id;
              return (
                <Link
                  key={tab.id}
                  href={tab.href}
                  className={`
                    group inline-flex items-center px-1 py-4 border-b-2 font-medium text-sm whitespace-nowrap
                    ${isActive
                      ? 'border-theme-accent text-theme-accent'
                      : 'border-transparent theme-text hover:text-theme-header hover:border-gray-300'
                    }
                  `}
                >
                  <span className="flex flex-col">
                    <span>{tab.label}</span>
                    <span className="text-xs theme-text mt-1 group-hover:text-theme-header">
                      {tab.description}
                    </span>
                  </span>
                </Link>
              );
            })}
          </nav>
        </div>
      </div>

      {/* Tab Content */}
      <div className="flex-1">
        {children}
      </div>
    </>
  );
}