"use client";

import type { FormData } from './cost-estimator-form';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { PartyPopper, RefreshCw } from 'lucide-react';
import React from 'react';

type Step11Props = {
  formData: FormData;
  onReset: () => void;
  estimatedHours: number;
};

const designHoursMap = { custom: 60, mockups: 30, existing: 0 };
const illustrationHoursMap = { '2d_static': 10, '2d_animated': 25, '3d_static': 20, '3d_animated': 40 };
const brandingHoursMap = { 'full-cycle': 70, 'brush-up': 30, 'logo-only': 20, 'none': 0 };
const featuresHoursMap: Record<string, number> = {
  'registration': 10,
  'member-profiles': 20,
  'admin-panel': 28,
  'crm-integration': 31,
  'dashboard': 40,
  'blog': 35,
  'event-scheduling': 35,
  'reservations': 35,
  'chat-live-chat': 50,
  'image-video-galleries': 5,
  'location-based': 40,
  'live-streaming': 55,
};
const shoppingCartHours = 45;


export const calculateTotalHours = (formData: FormData): 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 += illustrationHoursMap['2d_static'];
        if (formData.illustrations.is2dAnimated === 'animated') illustrationTotalHours += illustrationHoursMap['2d_animated'];
    }
    if (formData.illustrations.has3d) {
        if (formData.illustrations.is3dAnimated === 'static') illustrationTotalHours += illustrationHoursMap['3d_static'];
        if (formData.illustrations.is3dAnimated === 'animated') illustrationTotalHours += illustrationHoursMap['3d_animated'];
    }

    const brandingH = formData.branding ? (brandingHoursMap[formData.branding] ?? 0) : 0;

    const additionalFeaturesHours = formData.additionalFeatures.reduce((total, feature) => {
        return total + (featuresHoursMap[feature] || 0);
    }, 0);

    const cartHours = formData.shoppingCart ? shoppingCartHours : 0;

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

const HOURLY_RATE = 75; // Example hourly rate in USD

export function Step11Results({ formData, onReset, estimatedHours }: Step11Props) {
  
  const estimatedCost = estimatedHours * HOURLY_RATE;

  return (
    <div className="flex flex-col items-center text-center">
      <div className="rounded-full bg-primary/10 p-4 mb-4">
        <PartyPopper className="h-12 w-12 text-primary" />
      </div>
      <h2 className="font-headline text-3xl font-bold tracking-tight">Your Estimate is Ready!</h2>
      <p className="mt-2 text-muted-foreground">Based on your selections, here's our initial estimate.</p>
      
      <Card className="mt-8 w-full max-w-md">
        <CardHeader>
          <CardTitle className="text-muted-foreground tracking-normal font-medium">Estimated Cost</CardTitle>
          <CardDescription>This is an approximation. Final cost may vary.</CardDescription>
        </CardHeader>
        <CardContent className="text-center">
            <p className="text-5xl font-bold text-primary">${estimatedCost.toLocaleString()}</p>
            <p className="text-lg text-muted-foreground mt-2">({estimatedHours}+ hours)</p>
        </CardContent>
      </Card>

      <div className="mt-8">
        <Button onClick={onReset} size="lg">
            <RefreshCw className="mr-2 h-4 w-4" />
            Start Over
        </Button>
      </div>
    </div>
  );
}