'use client';

import { useState } from 'react';
import { Upload, File, X, CheckCircle } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';

export function SecureUpload() {
  const [files, setFiles] = useState<File[]>([]);
  const [isUploading, setIsUploading] = useState(false);

  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
    const selectedFiles = Array.from(event.target.files || []);
    setFiles(prev => [...prev, ...selectedFiles]);
  };

  const removeFile = (index: number) => {
    setFiles(prev => prev.filter((_, i) => i !== index));
  };

  const handleUpload = async () => {
    setIsUploading(true);
    // TODO: Implement actual file upload to S3 or similar service
    // This is a stub implementation
    await new Promise(resolve => setTimeout(resolve, 2000));
    setIsUploading(false);
    setFiles([]);
  };

  return (
    <Card className="max-w-2xl mx-auto">
      <CardHeader>
        <CardTitle>Secure Document Upload</CardTitle>
        <CardDescription>
          Upload your tax documents securely. All files are encrypted and stored safely.
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-6">
        <div className="border-2 border-dashed border-slate-300 rounded-lg p-6 text-center">
          <Upload className="mx-auto h-12 w-12 text-slate-400" />
          <div className="mt-4">
            <label htmlFor="file-upload" className="cursor-pointer">
              <span className="text-sm font-medium text-navy hover:text-teal">
                Click to upload
              </span>
              <span className="text-slate-500"> or drag and drop</span>
            </label>
            <input
              id="file-upload"
              name="file-upload"
              type="file"
              multiple
              className="sr-only"
              onChange={handleFileSelect}
              accept=".pdf,.jpg,.jpeg,.png,.doc,.docx"
            />
          </div>
          <p className="text-xs text-slate-500 mt-2">
            PDF, JPG, PNG, DOC up to 10MB each
          </p>
        </div>

        {files.length > 0 && (
          <div className="space-y-3">
            <h4 className="font-medium text-ink">Selected Files:</h4>
            {files.map((file, index) => (
              <div key={index} className="flex items-center justify-between p-3 bg-sand rounded-lg">
                <div className="flex items-center space-x-3">
                  <File className="h-5 w-5 text-navy" />
                  <div>
                    <p className="text-sm font-medium text-ink">{file.name}</p>
                    <p className="text-xs text-slate">
                      {(file.size / 1024 / 1024).toFixed(2)} MB
                    </p>
                  </div>
                </div>
                <button
                  onClick={() => removeFile(index)}
                  className="text-slate-400 hover:text-red-500"
                >
                  <X className="h-4 w-4" />
                </button>
              </div>
            ))}
          </div>
        )}

        <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
          <div className="flex items-start space-x-3">
            <CheckCircle className="h-5 w-5 text-blue-600 mt-0.5" />
            <div className="text-sm text-blue-800">
              <p className="font-medium">Secure & Private</p>
              <p className="mt-1">
                Your documents are encrypted and stored securely. Only authorized personnel can access your files.
              </p>
            </div>
          </div>
        </div>

        <Button
          onClick={handleUpload}
          disabled={files.length === 0 || isUploading}
          className="w-full"
          size="lg"
        >
          {isUploading ? 'Uploading...' : 'Upload Documents'}
        </Button>

        <p className="text-xs text-slate-500 text-center">
          Note: This is a demo interface. In production, this would integrate with a secure file storage service.
        </p>
      </CardContent>
    </Card>
  );
}