"use client";

import type { FormData } from './cost-estimator-form';
import { Button } from '@/components/ui/button';
import { Gauge } from 'lucide-react';
import React, { useState, useMemo } from 'react';

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

const designOptions = [
  {
    id: 'custom',
    title: 'Custom interface with Consultative Support',
    hours: 60,
  },
  {
    id: 'mockups',
    title: 'I have mockups',
    hours: 30,
  },
  {
    id: 'existing',
    title: 'My existing design will do',
    hours: 0,
  },
];

export function Step4DesignProcess({ onNext, onBack, onUpdateData, formData }: Step4Props) {
  const [selectedOption, setSelectedOption] = useState<string | null>(formData.designProcess);

  const handleSelect = (optionId: 'custom' | 'mockups' | 'existing') => {
    setSelectedOption(optionId);
    onUpdateData({ designProcess: optionId });
  };

  const estimatedHours = useMemo(() => {
    const designHours = designOptions.find(opt => opt.id === selectedOption)?.hours ?? 0;
    const stageHours = Math.round((formData.projectStage / 100) * 50);
    return stageHours + designHours;
  }, [selectedOption, formData.projectStage]);

  return (
    <div className="flex flex-col items-start">
      <h2 className="font-headline text-3xl font-bold tracking-tight">In need of design? What type of design process would you like?</h2>
      <div className="mt-8 grid w-full grid-cols-1 gap-4">
        {designOptions.map((option) => (
          <Button
            key={option.id}
            variant={selectedOption === option.id ? 'default' : 'outline'}
            className="w-full justify-start p-6 text-lg"
            onClick={() => handleSelect(option.id as any)}
          >
            {option.title}
          </Button>
        ))}
      </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-muted rounded-full" />
            </div>
            <Button onClick={onNext} disabled={!selectedOption}>
              Next
            </Button>
        </div>
      </div>
    </div>
  );
}