import React from 'react';
import { useSelector } from 'react-redux';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Clock, Pen, Bell, AlertTriangle, CheckCircle } from 'lucide-react';
import { RootState } from '@/store';

interface SLAConfigurationProps {
  onConfigureSLA: (sla: any) => void;
}

export const SLAConfiguration: React.FC<SLAConfigurationProps> = ({ onConfigureSLA }) => {
  const { slaConfigs } = useSelector((state: RootState) => state.master);

  return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between">
          <div>
            <CardTitle>SLA Configuration</CardTitle>
            <CardDescription>Configure service level agreements, reminders, and escalations for each stage</CardDescription>
          </div>
        </div>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {slaConfigs.map((sla) => (
            <div key={sla.id} className="border rounded-lg p-4 bg-gradient-to-br from-white to-slate-50 hover:shadow-md transition-shadow">
              <div className="flex items-start justify-between mb-3">
                <div className="flex items-center gap-3">
                  <Clock className="w-5 h-5 text-re-red" />
                  <div>
                    <h4 className="text-slate-900 font-medium">{sla.activityName}</h4>
                    <p className="text-xs text-slate-600">TAT: {sla.tatHours} {sla.tatUnit}</p>
                  </div>
                </div>
                <div className="flex items-center gap-2">
                  <Badge className={sla.isActive ? "bg-green-600" : "bg-slate-400"}>
                    {sla.isActive ? (
                      <><CheckCircle className="w-3 h-3 mr-1" /> Active</>
                    ) : (
                      'Inactive'
                    )}
                  </Badge>
                  <Button variant="outline" size="sm" onClick={() => onConfigureSLA(sla)} className="h-8 gap-1.5 px-3">
                    <Pen className="w-3 h-3 mr-2" />
                    Edit
                  </Button>
                </div>
              </div>

              <div className="grid grid-cols-2 gap-4 mt-3">
                <div className="border-l-2 border-blue-400 pl-3">
                  <div className="flex items-center gap-2 mb-2">
                    <Bell className="w-4 h-4 text-blue-600" />
                    <span className="text-xs text-slate-700">Reminders ({sla.reminders?.length || 0})</span>
                  </div>
                  <div className="space-y-1">
                    {(sla.reminders || []).map((reminder: any, idx: number) => (
                      <div key={idx} className="text-xs text-slate-600 flex items-center gap-1">
                        <Badge variant="outline" className="text-xs bg-blue-50 border-blue-200">
                          {reminder.timeValue} {reminder.timeUnit}
                        </Badge>
                        <span>before SLA</span>
                      </div>
                    ))}
                    {(!sla.reminders || sla.reminders.length === 0) && (
                      <p className="text-[10px] text-slate-400">No reminders configured</p>
                    )}
                  </div>
                </div>

                <div className="border-l-2 border-red-400 pl-3">
                  <div className="flex items-center gap-2 mb-2">
                    <AlertTriangle className="w-4 h-4 text-re-red" />
                    <span className="text-xs text-slate-700">Escalations ({sla.escalationConfigs?.length || 0})</span>
                  </div>
                  <div className="space-y-1">
                    {(sla.escalationConfigs || []).map((esc: any, idx: number) => (
                      <div key={idx} className="text-xs">
                        <div className="flex items-center gap-1 text-slate-900">
                          <Badge variant="outline" className="text-xs bg-red-50 border-red-200">
                            L{esc.level}
                          </Badge>
                          <span>after {esc.timeValue} {esc.timeUnit}</span>
                        </div>
                        <p className="text-slate-500 ml-9">→ {esc.notifyEmail}</p>
                      </div>
                    ))}
                    {(!sla.escalationConfigs || sla.escalationConfigs.length === 0) && (
                      <p className="text-[10px] text-slate-400">No escalations configured</p>
                    )}
                  </div>
                </div>
              </div>
            </div>
          ))}

          {slaConfigs.length === 0 && (
            <div className="text-center py-12 border-2 border-dashed rounded-xl">
              <Clock className="w-12 h-12 text-slate-300 mx-auto mb-3" />
              <p className="text-slate-500 font-medium">No SLA configurations found</p>
              <p className="text-slate-400 text-sm">Create a migration to seed default TAT values</p>
            </div>
          )}
        </div>
      </CardContent>
    </Card>
  );
};


