"use client";

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

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

export function QuoteStep2Selection({ quote, onNext, onPrev }: QuoteStep2SelectionProps) {
  // 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">
      {/* Phase Listing */}
      <div className="space-y-4">
        <h2 className="text-xl font-semibold text-slate-900">Fasi incluse nel preventivo</h2>

        {quote.phaseSummary.length > 0 ? (
          <div className="space-y-3">
            {quote.phaseSummary.map((phase) => (
              <Card key={phase.id} className="p-4 border-l-4 border-l-green-500 hover:shadow-md transition-shadow">
                <div className="flex items-start gap-3">
                  <CheckCircle className="h-5 w-5 text-green-600 mt-1 flex-shrink-0" />
                  <div className="flex-1">
                    <h3 className="font-semibold text-slate-900">{phase.title}</h3>
                    <p className="text-sm text-slate-600 mt-1">
                      {phase.serviceCount} servizio{phase.serviceCount !== 1 ? "i" : ""}
                    </p>
                  </div>
                </div>
              </Card>
            ))}
          </div>
        ) : (
          <p className="text-slate-600 text-sm">
            Nessuna fase configurata per questo preventivo
          </p>
        )}
      </div>

      {/* Divider */}
      <div className="border-t border-slate-200"></div>

      {/* Total Summary */}
      <div className="bg-slate-50 rounded-lg p-6 space-y-2">
        <div className="flex justify-between items-center">
          <span className="text-slate-700 font-medium">Totale preventivo:</span>
          <span className="text-3xl font-bold text-blue-600">{totalFormatted}</span>
        </div>
        <p className="text-xs text-slate-500">
          Questo totale è immutabile e comprende tutti i servizi sopra elencati
        </p>
      </div>

      {/* Info */}
      <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
        <p className="text-sm text-slate-700">
          <span className="font-semibold">Nota:</span> Nel passo successivo potrai confermare l'accettazione fornendo
          il tuo indirizzo email e eventuali note.
        </p>
      </div>

      {/* Navigation */}
      <div className="flex gap-3 pt-4">
        <Button
          onClick={onPrev}
          variant="outline"
          className="flex-1 h-12"
        >
          <ArrowLeft className="h-4 w-4 mr-2" />
          Indietro
        </Button>
        <Button
          onClick={onNext}
          className="flex-1 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 2 di 3 • Dettagli fasi
      </p>
    </div>
  );
}
