"use client";

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

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

const pageLabels = [
    "less than 5", // 0
    "5 - 10 pages", // 1
    "10 - 15 pages", // 2
    "15 - 20 pages", // 3
    "20 - 25 pages", // 4
    "25 - 30 pages", // 5
    "30 - 35 pages", // 6
    "35 - 40 pages", // 7
    "40 - 45 pages", // 8
    "45 - 50 pages", // 9
    "50+", // 10
];

const designHoursMap = {
  custom: 60,
  mockups: 30,
  existing: 0,
};

const calculateHours = (pageCount: number, projectStage: number, designProcess: 'custom' | 'mockups' | 'existing' | null): number => {
    const pageHours = pageCount * 6;
    const stageHours = Math.round((projectStage / 100) * 50);
    const designHours = designProcess ? designHoursMap[designProcess] : 0;
    return pageHours + stageHours + designHours;
};


export function Step5PageCount({ onNext, onBack, onUpdateData, formData }: Step5Props) {
  const [value, setValue] = useState([formData.pageCount]);

  const handleSliderChange = (newValue: number[]) => {
    setValue(newValue);
    onUpdateData({ pageCount: newValue[0] });
  };

  const currentLabel = useMemo(() => {
    const index = value[0];
    return pageLabels[index];
  }, [value]);
  
  const estimatedHours = useMemo(() => {
    const pages = value[0] === 10 ? 50 : (value[0] + 1) * 5 - 1; // Approx for calculation
    return calculateHours(pages, formData.projectStage, formData.designProcess);
  }, [value, formData.projectStage, formData.designProcess]);

  return (
    <div className="flex flex-col items-start">
      <h2 className="font-headline text-3xl font-bold tracking-tight text-center w-full">How many pages/screens do you have in mind?</h2>
      <div className="mt-16 w-full">
        <div className="flex justify-between items-center mb-4">
            <p className="font-medium text-muted-foreground">{pageLabels[0]}</p>
            <p className="font-medium text-muted-foreground">{pageLabels[10]}</p>
        </div>
        <Slider
          defaultValue={value}
          onValueChange={handleSliderChange}
          max={10}
          step={1}
          className="w-full"
        />
        <div className="text-center text-sm text-muted-foreground mt-2">
            <span>{currentLabel}</span>
        </div>
      </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-muted rounded-full" />
          </div>
          <Button onClick={onNext}>
            Next
          </Button>
        </div>
      </div>
    </div>
  );
}