
'use client';

import { Badge } from '@/components/ui/badge';
import { Card } from '@/components/ui/card';
import { CheckCircle2, AlertCircle, Clock } from 'lucide-react';
import { useEffect, useState } from 'react';

interface TrustBadgeProps {
  trustScore?: number;
  breachFlag?: boolean;
  slaOverride?: boolean;
  countdownMinutes?: number;
  variant?: 'compact' | 'full' | 'inline';
  className?: string;
}

export function TrustBadge({
  trustScore = 98,
  breachFlag = false,
  slaOverride = false,
  countdownMinutes = 30,
  variant = 'compact',
  className = ''
}: TrustBadgeProps) {
  const [timeRemaining, setTimeRemaining] = useState(countdownMinutes * 60);

  useEffect(() => {
    if (countdownMinutes && countdownMinutes > 0) {
      const interval = setInterval(() => {
        setTimeRemaining((prev) => (prev > 0 ? prev - 1 : 0));
      }, 1000);

      return () => clearInterval(interval);
    }
  }, [countdownMinutes]);

  const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return `${mins}:${secs.toString().padStart(2, '0')}`;
  };

  const getTrustColor = (score: number) => {
    if (score >= 95) return 'text-brand-green';
    if (score >= 80) return 'text-yellow-500';
    return 'text-red-500';
  };

  const getTrustBadgeColor = (score: number) => {
    if (score >= 95) return 'bg-brand-green/10 text-brand-green border-brand-green';
    if (score >= 80) return 'bg-yellow-500/10 text-yellow-600 border-yellow-500';
    return 'bg-red-500/10 text-red-600 border-red-500';
  };

  if (variant === 'inline') {
    return (
      <div className={`inline-flex items-center gap-2 ${className}`}>
        <Badge variant="outline" className={getTrustBadgeColor(trustScore)}>
          Trust Score: {trustScore}%
        </Badge>
        {breachFlag && (
          <Badge variant="outline" className="bg-red-500/10 text-red-600 border-red-500">
            <AlertCircle className="w-3 h-3 mr-1" />
            SLA Breach
          </Badge>
        )}
        {slaOverride && (
          <Badge variant="outline" className="bg-blue-500/10 text-blue-600 border-blue-500">
            Override Active
          </Badge>
        )}
      </div>
    );
  }

  if (variant === 'compact') {
    return (
      <div className={`inline-flex items-center gap-3 px-4 py-2 bg-white rounded-lg border border-gray-200 shadow-sm ${className}`}>
        <div className="flex items-center gap-2">
          {breachFlag ? (
            <AlertCircle className="w-5 h-5 text-red-500" />
          ) : (
            <CheckCircle2 className="w-5 h-5 text-brand-green" />
          )}
          <div>
            <p className="text-xs text-gray-500 font-medium">Trust Score</p>
            <p className={`text-lg font-bold ${getTrustColor(trustScore)}`}>{trustScore}%</p>
          </div>
        </div>
        {countdownMinutes > 0 && (
          <>
            <div className="h-8 w-px bg-gray-200" />
            <div className="flex items-center gap-2">
              <Clock className="w-4 h-4 text-brand-dark-blue" />
              <div>
                <p className="text-xs text-gray-500">SLA Timer</p>
                <p className="text-sm font-mono font-bold text-brand-dark-blue">{formatTime(timeRemaining)}</p>
              </div>
            </div>
          </>
        )}
      </div>
    );
  }

  return (
    <Card className={`p-6 ${className}`}>
      <div className="space-y-4">
        <div className="flex items-start justify-between">
          <div>
            <h3 className="text-sm font-medium text-gray-500 mb-1">Trust Score</h3>
            <p className={`text-4xl font-bold ${getTrustColor(trustScore)}`}>{trustScore}%</p>
          </div>
          {breachFlag ? (
            <AlertCircle className="w-8 h-8 text-red-500" />
          ) : (
            <CheckCircle2 className="w-8 h-8 text-brand-green" />
          )}
        </div>

        {breachFlag && (
          <div className="flex items-center gap-2 p-3 bg-red-50 border border-red-200 rounded-lg">
            <AlertCircle className="w-4 h-4 text-red-600" />
            <p className="text-sm font-medium text-red-600">SLA Breach Detected</p>
          </div>
        )}

        {slaOverride && (
          <div className="flex items-center gap-2 p-3 bg-blue-50 border border-blue-200 rounded-lg">
            <CheckCircle2 className="w-4 h-4 text-blue-600" />
            <p className="text-sm font-medium text-blue-600">SLA Override Active</p>
          </div>
        )}

        {countdownMinutes > 0 && (
          <div className="pt-4 border-t">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2">
                <Clock className="w-5 h-5 text-brand-dark-blue" />
                <span className="text-sm font-medium text-gray-700">SLA Countdown</span>
              </div>
              <p className="text-2xl font-mono font-bold text-brand-dark-blue">{formatTime(timeRemaining)}</p>
            </div>
          </div>
        )}

        <div className="pt-4 border-t space-y-2">
          <div className="flex justify-between text-sm">
            <span className="text-gray-500">Response Time</span>
            <span className="font-medium text-gray-900">{'<'}2h avg</span>
          </div>
          <div className="flex justify-between text-sm">
            <span className="text-gray-500">Completion Rate</span>
            <span className="font-medium text-gray-900">99.2%</span>
          </div>
          <div className="flex justify-between text-sm">
            <span className="text-gray-500">Customer Satisfaction</span>
            <span className="font-medium text-gray-900">4.9/5.0</span>
          </div>
        </div>
      </div>
    </Card>
  );
}
