'use client';

import * as React from 'react';
import { AlertTriangle, XCircle, Info, X } from 'lucide-react';
import { Modal } from '@/components/ui/Modal';
import { Button } from '@/components/ui/Button';
import { getBrowserInfo } from '@/lib/utils/browser-compat';

interface BrowserCompatDialogProps {
  open: boolean;
  missingFeatures: string[];
  warnings: string[];
  onClose: () => void;
}

export function BrowserCompatDialog({
  open,
  missingFeatures,
  warnings,
  onClose,
}: BrowserCompatDialogProps) {
  const [browserInfo, setBrowserInfo] = React.useState({ name: 'Unknown', version: 'Unknown' });
  const hasErrors = missingFeatures.length > 0;

  // Get browser info only on client side
  React.useEffect(() => {
    setBrowserInfo(getBrowserInfo());
  }, []);

  if (!open) return null;

  return (
    <Modal open={open} onClose={onClose} title="">
      <div className="p-6 max-w-md">
        {/* Header */}
        <div className="flex items-start justify-between mb-4">
          <div className="flex items-center gap-2">
            {hasErrors ? (
              <>
                <XCircle className="h-5 w-5 text-destructive" />
                <h2 className="text-lg font-semibold">Browser Not Supported</h2>
              </>
            ) : (
              <>
                <AlertTriangle className="h-5 w-5 text-yellow-500" />
                <h2 className="text-lg font-semibold">Browser Warnings</h2>
              </>
            )}
          </div>
          <button onClick={onClose} className="text-muted-foreground hover:text-foreground">
            <X className="h-4 w-4" />
          </button>
        </div>

        <p className="text-sm text-muted-foreground mb-4">
          {hasErrors ? (
            <>Your browser is missing required features to run this audio editor.</>
          ) : (
            <>Some features may not work as expected in your browser.</>
          )}
        </p>

        <div className="space-y-4">
          {/* Browser Info */}
          <div className="flex items-center gap-2 text-sm text-muted-foreground">
            <Info className="h-4 w-4" />
            <span>
              {browserInfo.name} {browserInfo.version}
            </span>
          </div>

          {/* Missing Features */}
          {missingFeatures.length > 0 && (
            <div className="space-y-2">
              <h3 className="text-sm font-semibold text-destructive flex items-center gap-2">
                <XCircle className="h-4 w-4" />
                Missing Required Features:
              </h3>
              <ul className="list-disc list-inside space-y-1 text-sm text-muted-foreground">
                {missingFeatures.map((feature) => (
                  <li key={feature}>{feature}</li>
                ))}
              </ul>
            </div>
          )}

          {/* Warnings */}
          {warnings.length > 0 && (
            <div className="space-y-2">
              <h3 className="text-sm font-semibold text-yellow-600 dark:text-yellow-500 flex items-center gap-2">
                <AlertTriangle className="h-4 w-4" />
                Warnings:
              </h3>
              <ul className="list-disc list-inside space-y-1 text-sm text-muted-foreground">
                {warnings.map((warning) => (
                  <li key={warning}>{warning}</li>
                ))}
              </ul>
            </div>
          )}

          {/* Recommendations */}
          {hasErrors && (
            <div className="bg-muted/50 border border-border rounded-md p-3 space-y-2">
              <h3 className="text-sm font-semibold">Recommended Browsers:</h3>
              <ul className="text-sm text-muted-foreground space-y-1">
                <li>• Chrome 90+ or Edge 90+</li>
                <li>• Firefox 88+</li>
                <li>• Safari 14+</li>
              </ul>
            </div>
          )}

          {/* Actions */}
          <div className="flex justify-end gap-2">
            {hasErrors ? (
              <Button onClick={onClose} variant="destructive">
                Close
              </Button>
            ) : (
              <Button onClick={onClose}>
                Continue Anyway
              </Button>
            )}
          </div>
        </div>
      </div>
    </Modal>
  );
}