"use client";

import type { FormData, BrandingSelection } from './cost-estimator-form';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Gauge, Compass, PaintBrush, Zap, X } from 'lucide-react';
import React, { useState, useMemo } from 'react';

type Step8Props = {
  onNext: () => void;
  onBack: () => void;
  onUpdateData: (data: Partial<FormData>) => void;
  formData: FormData;
};

const brandingOptions = [
    { id: 'full-cycle', title: 'I need a full-cycle branding for my project', hours: 80, icon: <Compass className="h-10 w-10 text-primary" /> },
    { id: 'brush-up', title: 'I need to brush up on my existing project', hours: 40, icon: <PaintBrush className="h-10 w-10 text-primary" /> },
    { id: 'logo-only', title: 'I just need a logo', hours: 20, icon: <Zap className="h-10 w-10 text-primary" /> },
    { id: 'none', title: "No, I'm better off without it", hours: 0, icon: <X className="h-10 w-10 text-primary" /> },
];

const designHoursMap = { custom: 60, mockups: 30, existing: 0 };
const illustrationHours = { '2d_static': 10, '2d_animated': 25, '3d_static': 20, '3d_animated': 40 };

const calculateHours = (
    formData: FormData,
    branding: BrandingSelection
): number => {
    const pageVal = formData.pageCount === 10 ? 50 : (formData.pageCount + 1) * 5 - 1;
    const pageHours = pageVal * 6;
    const stageHours = Math.round((formData.projectStage / 100) * 50);
    const designHours = formData.designProcess ? designHoursMap[formData.designProcess] : 0;
    const animationHours = formData.animatedElements ? 30 : 0;

    let illustrationTotalHours = 0;
    if (formData.illustrations.has2d) {
        if (formData.illustrations.is2dAnimated === 'static') illustrationTotalHours += illustrationHours['2d_static'];
        if (formData.illustrations.is2dAnimated === 'animated') illustrationTotalHours += illustrationHours['2d_animated'];
    }
    if (formData.illustrations.has3d) {
        if (formData.illustrations.is3dAnimated === 'static') illustrationTotalHours += illustrationHours['3d_static'];
        if (formData.illustrations.is3dAnimated === 'animated') illustrationTotalHours += illustrationHours['3d_animated'];
    }

    const brandingH = branding ? (brandingOptions.find(b => b.id === branding)?.hours ?? 0) : 0;

    return pageHours + stageHours + designHours + animationHours + illustrationTotalHours + brandingH;
};


export function Step8Branding({ onNext, onBack, onUpdateData, formData }: Step8Props) {
  const [selected, setSelected] = useState<BrandingSelection>(formData.branding);

  const handleSelect = (option: BrandingSelection) => {
    setSelected(option);
    onUpdateData({ branding: option });
    onNext();
  };
  
  const estimatedHours = useMemo(() => {
    return calculateHours(formData, selected);
  }, [selected, formData]);


  return (
    <div className="flex flex-col items-center text-center">
      <h2 className="font-headline text-3xl font-bold tracking-tight">Have you thought about branding?</h2>
      <div className="mt-8 grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
        {brandingOptions.map((option) => (
          <Card
            key={option.id}
            onClick={() => handleSelect(option.id as BrandingSelection)}
            className={`cursor-pointer transition-all duration-300 ease-in-out hover:shadow-accent/20 hover:shadow-lg hover:-translate-y-1 hover:border-primary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 ${selected === option.id ? 'border-primary shadow-lg' : ''}`}
            tabIndex={0}
             onKeyDown={(e) => {
              if (e.key === 'Enter' || e.key === ' ') {
                handleSelect(option.id as any);
              }
            }}
          >
            <CardContent className="flex flex-col items-center justify-center p-6 gap-4">
                <div className="rounded-full bg-primary/10 p-4">{option.icon}</div>
                <p className="font-medium text-center">{option.title}</p>
            </CardContent>
          </Card>
        ))}
      </div>
       <div className="mt-16 flex w-full items-center justify-between">
        <div className="flex items-center gap-2">
            <Gauge className="h-6 w-6 text-primary" />
            <span className="font-headline text-lg font-bold">{estimatedHours}+ hours</span>
        </div>
        <div className="flex items-center gap-4">
            <Button variant="ghost" onClick={onBack}>Go Back</Button>
            <div className="flex items-center gap-2">
              <div className="w-12 h-2 bg-primary rounded-full" />
              <div className="w-12 h-2 bg-primary rounded-full" />
              <div className="w-12 h-2 bg-primary rounded-full" />
              <div className="w-12 h-2 bg-primary rounded-full" />
              <div className="w-12 h-2 bg-primary rounded-full" />
              <div className="w-12 h-2 bg-primary rounded-full" />
              <div className="w-12 h-2 bg-primary rounded-full" />
              <div className="w-12 h-2 bg-primary rounded-full" />
            </div>
            <Button onClick={onNext} disabled={selected === null}>
              See Results
            </Button>
        </div>
      </div>
    </div>
  );
}