import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Upload, Archive } from 'lucide-react';

interface DocumentUploadSettingsProps {
  maxFileSizeMB: number;
  retentionDays: number;
  onMaxFileSizeChange: (size: number) => void;
  onRetentionDaysChange: (days: number) => void;
}

export function DocumentUploadSettings({
  maxFileSizeMB,
  retentionDays,
  onMaxFileSizeChange,
  onRetentionDaysChange
}: DocumentUploadSettingsProps) {
  // Convert days to years for display (optional, or keep as days)
  const retentionYears = Math.round((retentionDays / 365) * 10) / 10;

  return (
    <Card className="border-0 shadow-sm">
      <CardHeader className="pb-3">
        <div className="flex items-center gap-2">
          <Upload className="w-5 h-5 text-re-green" />
          <CardTitle className="text-base font-semibold">Upload & Retention Settings</CardTitle>
        </div>
        <CardDescription className="text-sm">
          Configure file size limits and document retention period
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="space-y-2">
            <Label htmlFor="max-upload" className="text-sm font-medium">
              Maximum Upload Size (MB)
            </Label>
            <Input
              id="max-upload"
              type="number"
              min="1"
              max="100"
              value={maxFileSizeMB}
              onChange={(e) => onMaxFileSizeChange(parseInt(e.target.value) || 10)}
              className="border-gray-200 focus:border-re-green focus:ring-2 focus:ring-re-green/20"
            />
            <p className="text-xs text-muted-foreground flex items-center gap-1">
              <Upload className="w-3 h-3" />
              Maximum allowed file size for document uploads
            </p>
          </div>

          <div className="space-y-2">
            <Label htmlFor="retention" className="text-sm font-medium">
              Retention Period (Days)
            </Label>
            <Input
              id="retention"
              type="number"
              min="30"
              max="3650"
              value={retentionDays}
              onChange={(e) => onRetentionDaysChange(parseInt(e.target.value) || 365)}
              className="border-gray-200 focus:border-re-green focus:ring-2 focus:ring-re-green/20"
            />
            <p className="text-xs text-muted-foreground flex items-center gap-1">
              <Archive className="w-3 h-3" />
              Days to retain documents after workflow closure ({retentionYears} years)
            </p>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}
