'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { DollarSign, MapPin, Hammer, Calendar, Info } from 'lucide-react';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';

interface QuoteSummaryBoxProps {
  projectType?: string;
  material?: string;
  location?: string;
  estimatedRange?: {
    min: number;
    max: number;
    currency: string;
  };
  showEstimate?: boolean;
  className?: string;
}

export function QuoteSummaryBox({
  projectType = 'Project',
  material,
  location,
  estimatedRange,
  showEstimate = false,
  className = '',
}: QuoteSummaryBoxProps) {
  return (
    <Card className={`border-2 border-brand-primary/20 bg-gradient-to-br from-brand-primary/5 to-brand-dark/5 ${className}`}>
      <CardHeader className="pb-3">
        <div className="flex items-center justify-between">
          <CardTitle className="text-lg font-heading flex items-center gap-2">
            <DollarSign className="w-5 h-5 text-brand-primary" />
            Quote Summary
          </CardTitle>
          <TooltipProvider>
            <Tooltip>
              <TooltipTrigger>
                <Info className="w-4 h-4 text-gray-400 hover:text-gray-600" />
              </TooltipTrigger>
              <TooltipContent>
                <p className="max-w-xs text-sm">
                  {showEstimate 
                    ? "Estimated range based on typical projects. Final quote will be provided by your contractor."
                    : "Your quote will be calculated by verified contractors and sent to you shortly."}
                </p>
              </TooltipContent>
            </Tooltip>
          </TooltipProvider>
        </div>
      </CardHeader>
      <CardContent className="space-y-4">
        {/* Project Details */}
        <div className="space-y-3">
          <div className="flex items-start gap-3">
            <Hammer className="w-5 h-5 text-brand-dark mt-0.5 flex-shrink-0" />
            <div className="flex-1">
              <p className="text-sm text-gray-600">Project Type</p>
              <p className="font-semibold text-brand-dark capitalize">
                {projectType || 'Not selected'}
              </p>
            </div>
          </div>

          {material && (
            <div className="flex items-start gap-3">
              <Hammer className="w-5 h-5 text-brand-dark mt-0.5 flex-shrink-0" />
              <div className="flex-1">
                <p className="text-sm text-gray-600">Material/Option</p>
                <p className="font-semibold text-brand-dark">
                  {material}
                </p>
              </div>
            </div>
          )}

          {location && (
            <div className="flex items-start gap-3">
              <MapPin className="w-5 h-5 text-brand-primary mt-0.5 flex-shrink-0" />
              <div className="flex-1">
                <p className="text-sm text-gray-600">Location</p>
                <p className="font-semibold text-brand-dark text-sm">
                  {location}
                </p>
              </div>
            </div>
          )}
        </div>

        {/* Estimated Range (if enabled) */}
        {showEstimate && estimatedRange && (
          <div className="pt-4 border-t border-brand-primary/20">
            <div className="bg-brand-primary/10 rounded-lg p-4">
              <div className="flex items-center gap-2 mb-2">
                <Calendar className="w-4 h-4 text-brand-primary" />
                <p className="text-xs font-semibold text-brand-dark uppercase tracking-wide">
                  Estimated Range
                </p>
              </div>
              <p className="text-2xl font-heading font-bold text-brand-dark">
                {estimatedRange.currency}
                {estimatedRange.min.toLocaleString()} - {estimatedRange.currency}
                {estimatedRange.max.toLocaleString()}
              </p>
              <p className="text-xs text-gray-600 mt-1">
                * Actual quote may vary based on site inspection
              </p>
            </div>
          </div>
        )}

        {/* Status Badge */}
        <div className="pt-3 border-t border-brand-primary/20">
          <Badge variant="outline" className="w-full justify-center border-brand-primary text-brand-primary bg-brand-primary/5">
            Quote will be sent within 24 hours
          </Badge>
        </div>
      </CardContent>
    </Card>
  );
}
