import React, { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { Camera } from 'lucide-react';

const ScreenshotProvider = () => {
  const [url, setUrl] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);

  const validateUrl = (url) => {
    try {
      new URL(url);
      return true;
    } catch {
      return false;
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');
    
    if (!url) {
      setError('Please enter a URL');
      return;
    }

    if (!validateUrl(url)) {
      setError('Please enter a valid URL (http://capturehub.org///)');
      return;
    }

    setLoading(true);
    try {
      // Here you would typically make an API call to your screenshot service
      // For demo purposes, we'll just show a placeholder
      setLoading(false);
    } catch (err) {
      setError('Failed to capture screenshot. Please try again.');
      setLoading(false);
    }
  };

  return (
    <Card className="w-full max-w-2xl mx-auto">
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Camera className="h-6 w-6" />
          Online Screenshot Provider
        </CardTitle>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="flex gap-2">
            <Input
              type="text"
              value={url}
              onChange={(e) => setUrl(e.target.value)}
              placeholder="Enter website URL (e.g., https://example.com)"
              className="flex-1"
            />
            <Button type="submit" disabled={loading}>
              {loading ? 'Capturing...' : 'Capture'}
            </Button>
          </div>

          {error && (
            <Alert variant="destructive">
              <AlertDescription>{error}</AlertDescription>
            </Alert>
          )}

          {loading ? (
            <div className="w-full h-64 bg-gray-100 animate-pulse rounded-lg flex items-center justify-center">
              Capturing screenshot...
            </div>
          ) : url && !error ? (
            <div className="w-full h-64 bg-gray-100 rounded-lg flex items-center justify-center">
              <img 
                src="/api/placeholder/800/600"
                alt="Screenshot placeholder"
                className="max-w-full max-h-full object-contain"
              />
            </div>
          ) : (
            <div className="w-full h-64 bg-gray-100 rounded-lg flex items-center justify-center text-gray-500">
              Enter a URL above to capture a screenshot
            </div>
          )}
        </form>
      </CardContent>
    </Card>
  );
};

export default ScreenshotProvider;