import React from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Progress } from '@/components/ui/progress';
import { CheckCircle, AlertTriangle, FileText, Shield } from 'lucide-react';

const complianceStandards = [
  { name: 'GDPR', status: 'compliant', score: 98, lastAudit: '2025-09-15' },
  { name: 'PCI DSS', status: 'compliant', score: 95, lastAudit: '2025-09-20' },
  { name: 'ISO 27001', status: 'compliant', score: 92, lastAudit: '2025-08-30' },
  { name: 'SOC 2', status: 'review', score: 88, lastAudit: '2025-09-10' }
];

const requirements = [
  { category: 'Data Protection', completed: 24, total: 25, priority: 'high' },
  { category: 'Access Management', completed: 18, total: 20, priority: 'high' },
  { category: 'Encryption', completed: 15, total: 15, priority: 'critical' },
  { category: 'Incident Response', completed: 10, total: 12, priority: 'medium' },
  { category: 'Documentation', completed: 8, total: 10, priority: 'low' }
];

const ComplianceMonitor = () => {
  const getStatusColor = (status: string) => {
    return status === 'compliant' 
      ? 'bg-green-100 text-green-800' 
      : 'bg-yellow-100 text-yellow-800';
  };

  const getPriorityColor = (priority: string) => {
    switch (priority) {
      case 'critical': return 'text-red-600';
      case 'high': return 'text-orange-600';
      case 'medium': return 'text-yellow-600';
      default: return 'text-blue-600';
    }
  };

  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Overall Score</CardTitle>
            <Shield className="h-4 w-4 text-green-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">93%</div>
            <p className="text-xs text-gray-600 mt-1">Excellent compliance</p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Standards</CardTitle>
            <CheckCircle className="h-4 w-4 text-blue-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">4</div>
            <p className="text-xs text-gray-600 mt-1">Active certifications</p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Open Issues</CardTitle>
            <AlertTriangle className="h-4 w-4 text-orange-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">7</div>
            <p className="text-xs text-gray-600 mt-1">Require attention</p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Last Audit</CardTitle>
            <FileText className="h-4 w-4 text-purple-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">15</div>
            <p className="text-xs text-gray-600 mt-1">Days ago</p>
          </CardContent>
        </Card>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>Compliance Standards</CardTitle>
          <CardDescription>Status of regulatory compliance standards</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {complianceStandards.map((standard) => (
              <div key={standard.name} className="border rounded-lg p-4 hover:bg-gray-50 transition-colors">
                <div className="flex items-center justify-between mb-3">
                  <div className="flex items-center gap-3">
                    <h3 className="font-semibold text-gray-900">{standard.name}</h3>
                    <Badge className={getStatusColor(standard.status)}>
                      {standard.status}
                    </Badge>
                  </div>
                  <span className="text-sm text-gray-600">
                    Last audit: {standard.lastAudit}
                  </span>
                </div>
                <div className="space-y-2">
                  <div className="flex items-center justify-between text-sm">
                    <span className="text-gray-600">Compliance Score</span>
                    <span className="font-semibold">{standard.score}%</span>
                  </div>
                  <Progress value={standard.score} className="h-2" />
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Compliance Requirements</CardTitle>
          <CardDescription>Progress on compliance requirements by category</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {requirements.map((req) => (
              <div key={req.category} className="border rounded-lg p-4">
                <div className="flex items-center justify-between mb-3">
                  <div className="flex items-center gap-2">
                    <h3 className="font-semibold text-gray-900">{req.category}</h3>
                    <span className={`text-xs font-semibold uppercase ${getPriorityColor(req.priority)}`}>
                      {req.priority}
                    </span>
                  </div>
                  <span className="text-sm text-gray-600">
                    {req.completed} of {req.total}
                  </span>
                </div>
                <Progress value={(req.completed / req.total) * 100} className="h-2" />
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  );
};

export default ComplianceMonitor;
