'use client';

import { usePathname } from 'next/navigation';
import { useTranslations } from 'next-intl';
import { cn } from '@/lib/utils';
import { Check } from 'lucide-react';

interface SetupLayoutContentProps {
  children: React.ReactNode;
  locale: string;
  title: string;
  notAccessible: string;
}

const steps = ['systemCheck', 'adminSetup', 'branding', 'complete'] as const;

export function SetupLayoutContent({ children, title, notAccessible }: SetupLayoutContentProps) {
  const pathname = usePathname();
  const t = useTranslations('installer.steps');

  // Determine the active step index based on the current URL path
  let activeStep = 0;
  if (pathname.includes('/complete')) activeStep = 3;
  else if (pathname.includes('/branding')) activeStep = 2;
  else if (pathname.includes('/admin')) activeStep = 1;
  else activeStep = 0;

  return (
    <div className="min-h-screen bg-background flex flex-col">
      {/* Header */}
      <header className="border-b bg-card">
        <div className="container mx-auto px-4 py-4 flex items-center gap-3">
          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground font-bold text-sm">
            t
          </div>
          <span className="text-xl font-bold">OS</span>
          <span className="text-muted-foreground mx-2">·</span>
          <span className="text-muted-foreground">{title}</span>
        </div>
      </header>

      {/* Step Indicator */}
      <div className="border-b bg-muted/30">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center gap-2">
            {steps.map((step, index) => (
              <div key={step} className="flex items-center gap-2">
                <div
                  className={cn(
                    'flex h-7 w-7 items-center justify-center rounded-full text-xs font-medium transition-colors',
                    index < activeStep && 'bg-primary text-primary-foreground',
                    index === activeStep &&
                      'bg-primary text-primary-foreground ring-2 ring-primary ring-offset-2',
                    index > activeStep && 'bg-muted text-muted-foreground border'
                  )}
                >
                  {index < activeStep ? <Check className="h-3.5 w-3.5" /> : index + 1}
                </div>
                <span
                  className={cn(
                    'text-sm hidden sm:block',
                    index === activeStep ? 'font-medium text-foreground' : 'text-muted-foreground'
                  )}
                >
                  {t(step)}
                </span>
                {index < steps.length - 1 && (
                  <div
                    className={cn(
                      'h-px w-8 sm:w-16 mx-1',
                      index < activeStep ? 'bg-primary' : 'bg-border'
                    )}
                  />
                )}
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Content */}
      <main className="flex-1 container mx-auto px-4 py-8 max-w-2xl">{children}</main>

      {/* Footer */}
      <footer className="border-t py-4">
        <div className="container mx-auto px-4 text-center text-xs text-muted-foreground">
          {notAccessible}
        </div>
      </footer>
    </div>
  );
}
