"use client";

import type { PublicQuoteView } from "@/lib/quote-service";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { ArrowRight } from "lucide-react";

interface QuoteStep1OverviewProps {
  quote: PublicQuoteView;
  onNext: () => void;
}

export function QuoteStep1Overview({ quote, onNext }: QuoteStep1OverviewProps) {
  // Format total as currency
  const totalInCents = Math.round(parseFloat(quote.accepted_total) * 100);
  const totalFormatted = (totalInCents / 100).toLocaleString("it-IT", {
    style: "currency",
    currency: "EUR",
  });

  return (
    <div className="space-y-8 p-8">
      {/* Offer Name */}
      <div className="text-center space-y-2">
        <h2 className="text-2xl font-semibold text-slate-900">{quote.offerName}</h2>
      </div>

      {/* Total Price (Large & Prominent) */}
      <div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg p-8 text-center border border-blue-200">
        <p className="text-sm font-medium text-slate-600 mb-2">Investimento totale</p>
        <p className="text-5xl font-bold text-blue-600">{totalFormatted}</p>
        <p className="text-sm text-slate-600 mt-4">
          Tutto ciò che serve per il tuo progetto di personal branding
        </p>
      </div>

      {/* Phase Summary */}
      <div className="space-y-3">
        <h3 className="text-sm font-semibold text-slate-700 uppercase tracking-wide">
          Cosa è incluso
        </h3>
        <div className="space-y-2">
          {quote.phaseSummary.length > 0 ? (
            quote.phaseSummary.map((phase) => (
              <Card key={phase.id} className="p-4 border-l-4 border-l-blue-500">
                <div className="flex justify-between items-start">
                  <div>
                    <p className="font-medium text-slate-900">{phase.title}</p>
                  </div>
                  <span className="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded-full font-medium">
                    {phase.serviceCount} servizio{phase.serviceCount !== 1 ? "i" : ""}
                  </span>
                </div>
              </Card>
            ))
          ) : (
            <p className="text-slate-600 text-sm">
              Nessuna fase configurata per questo preventivo
            </p>
          )}
        </div>
      </div>

      {/* CTA */}
      <div className="pt-4">
        <Button
          onClick={onNext}
          size="lg"
          className="w-full bg-blue-600 hover:bg-blue-700 text-white h-12"
        >
          Continua <ArrowRight className="ml-2 h-4 w-4" />
        </Button>
      </div>

      {/* Info text */}
      <p className="text-xs text-slate-500 text-center">
        Passo 1 di 3 • Panoramica preventivo
      </p>
    </div>
  );
}
