import React from 'react';
import { Sidebar } from './Sidebar';
import { Header } from './Header';
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '../ui/breadcrumb';

interface LayoutProps {
  children: React.ReactNode;
  currentView: string;
  setCurrentView: (view: string) => void;
}

const LABELING_SUB_VIEWS = ['Label Categories', 'Label Types', 'Label Templates', 'Multiple Options'];

function getBreadcrumbItems(title: string): { label: string; view: string }[] {
  const items: { label: string; view: string }[] = [{ label: 'Home', view: 'Dashboard' }];
  if (title === 'Labels' || title === 'Label Categories' || title === 'Label Types' || title === 'Label Templates' || title === 'Multiple Options') {
    if (LABELING_SUB_VIEWS.includes(title)) {
      items.push({ label: 'Labeling', view: 'Labels' });
    }
    items.push({ label: title, view: title });
  } else {
    items.push({ label: title, view: title });
  }
  return items;
}

export function Layout({ children, currentView, setCurrentView }: LayoutProps) {
  const breadcrumbItems = getBreadcrumbItems(currentView);

  return (
    <div
      className="flex h-screen bg-gray-50 overflow-hidden font-sans"
      style={{ '--header-bar-height': '90px' } as React.CSSProperties}
    >
      <Sidebar currentView={currentView} setCurrentView={setCurrentView} />
      <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
        <Header title={currentView} />
        <main className="flex-1 overflow-y-auto p-8">
          <div className="flex flex-col gap-6 w-full">
            <Breadcrumb>
              <BreadcrumbList className="text-gray-500">
                {breadcrumbItems.map((item, index) => (
                  <React.Fragment key={index}>
                    {index > 0 && <BreadcrumbSeparator />}
                    <BreadcrumbItem>
                      {index === breadcrumbItems.length - 1 ? (
                        <BreadcrumbPage className="font-medium" style={{ color: '#1b46c7' }}>{item.label}</BreadcrumbPage>
                      ) : (
                        <BreadcrumbLink asChild>
                          <button type="button" onClick={() => setCurrentView(item.view)} className="hover:text-gray-900 transition-colors">
                            {item.label}
                          </button>
                        </BreadcrumbLink>
                      )}
                    </BreadcrumbItem>
                  </React.Fragment>
                ))}
              </BreadcrumbList>
            </Breadcrumb>
            <div className="w-full min-h-0">
              {children}
            </div>
          </div>
        </main>
      </div>
    </div>
  );
}