'use client';

import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { cn } from '@/lib/utils';
import { NeighborhoodPOIMap } from './neighborhood-poi-map';
import { NeighborhoodRadarChart } from './neighborhood-radar-chart';
import type { NeighborhoodScoreData } from './types';

interface NeighborhoodScoreProps {
  data: NeighborhoodScoreData;
  showMap?: boolean;
  mapHeight?: string;
  className?: string;
}

function getOverallVariant(score: number): 'success' | 'warning' | 'destructive' {
  if (score > 7) return 'success';
  if (score >= 5) return 'warning';
  return 'destructive';
}

function getOverallLabel(score: number): string {
  if (score > 7) return 'Khu vực tốt';
  if (score >= 5) return 'Khu vực trung bình';
  return 'Khu vực cần cải thiện';
}

export function NeighborhoodScore({
  data,
  showMap = true,
  mapHeight = '350px',
  className,
}: NeighborhoodScoreProps) {
  return (
    <div className={cn('space-y-4', className)}>
      {/* Overall Score Header */}
      <Card>
        <CardHeader className="pb-2">
          <div className="flex items-center justify-between">
            <CardTitle className="text-lg">Đánh giá khu vực</CardTitle>
            <div className="flex items-center gap-2">
              <Badge variant={getOverallVariant(data.overallScore)} className="text-sm">
                {data.overallScore.toFixed(1)}/10
              </Badge>
              <span className="text-sm text-muted-foreground">
                {getOverallLabel(data.overallScore)}
              </span>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <NeighborhoodRadarChart
            categories={data.categories}
            height={280}
            showBadges
          />
        </CardContent>
      </Card>

      {/* POI Map */}
      {showMap && data.pois.length > 0 && (
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-lg">Tiện ích xung quanh</CardTitle>
          </CardHeader>
          <CardContent>
            <NeighborhoodPOIMap
              center={data.center}
              pois={data.pois}
              height={mapHeight}
            />
          </CardContent>
        </Card>
      )}
    </div>
  );
}
