import { Label } from '@/components/ui/label';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Slider } from '@/components/ui/slider';
import { Bell, AlertTriangle } from 'lucide-react';

interface EscalationSettingsProps {
  reminderThreshold1: number;
  reminderThreshold2: number;
  onReminderThreshold1Change: (threshold: number) => void;
  onReminderThreshold2Change: (threshold: number) => void;
}

export function EscalationSettings({
  reminderThreshold1,
  reminderThreshold2,
  onReminderThreshold1Change,
  onReminderThreshold2Change
}: EscalationSettingsProps) {
  return (
    <Card className="border-0 shadow-sm">
      <CardHeader className="pb-3">
        <div className="flex items-center gap-2">
          <Bell className="w-5 h-5 text-re-green" />
          <CardTitle className="text-base font-semibold">Auto-Reminder & Escalation</CardTitle>
        </div>
        <CardDescription className="text-sm">
          Configure automatic reminder thresholds based on TAT percentage
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-6">
        <div className="space-y-4">
          <div className="space-y-3">
            <div className="flex items-center justify-between">
              <Label htmlFor="reminder-threshold-1" className="text-sm font-medium">
                First Reminder Threshold
              </Label>
              <span className="text-lg font-semibold text-re-green">{reminderThreshold1}%</span>
            </div>
            <Slider
              id="reminder-threshold-1"
              value={[reminderThreshold1]}
              min={1}
              max={100}
              step={1}
              onValueChange={([value]) => {
                if (value !== undefined) {
                  onReminderThreshold1Change(value);
                }
              }}
              className="w-full"
            />
            <p className="text-xs text-muted-foreground flex items-center gap-1">
              <Bell className="w-3 h-3" />
              Send first gentle reminder when {reminderThreshold1}% of TAT elapsed
            </p>
          </div>

          <div className="space-y-3">
            <div className="flex items-center justify-between">
              <Label htmlFor="reminder-threshold-2" className="text-sm font-medium">
                Second Reminder Threshold (Escalation)
              </Label>
              <span className="text-lg font-semibold text-re-green">{reminderThreshold2}%</span>
            </div>
            <Slider
              id="reminder-threshold-2"
              value={[reminderThreshold2]}
              min={1}
              max={100}
              step={1}
              onValueChange={([value]) => {
                if (value !== undefined) {
                  onReminderThreshold2Change(value);
                }
              }}
              className="w-full"
            />
            <p className="text-xs text-muted-foreground flex items-center gap-1">
              <AlertTriangle className="w-3 h-3" />
              Send escalation warning when {reminderThreshold2}% of TAT elapsed
            </p>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}
