'use client';

import { ChangeEvent, useMemo, useRef, useState } from 'react';
import { useParams } from 'next/navigation';
import { CheckCircle2, ImageIcon, Loader2, ShieldCheck, Upload } from 'lucide-react';
import { toast } from 'sonner';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { Label } from '@/components/ui/label';
import { Separator } from '@/components/ui/separator';

const MAX_FILE_SIZE = 5 * 1024 * 1024;
const ALLOWED_TYPES = ['image/jpeg', 'image/png', 'image/webp', 'image/jpg'];

function readFileAsDataUrl(file: File): Promise<string> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(String(reader.result || ''));
    reader.onerror = () => reject(new Error('Failed to read file'));
    reader.readAsDataURL(file);
  });
}

export default function UploadScreenshotPage() {
  const params = useParams<{ id: string }>();
  const orderId = decodeURIComponent(params?.id || '');
  const inputRef = useRef<HTMLInputElement | null>(null);
  const [file, setFile] = useState<File | null>(null);
  const [preview, setPreview] = useState<string>('');
  const [isUploading, setIsUploading] = useState(false);
  const [uploaded, setUploaded] = useState(false);

  const fileMeta = useMemo(() => {
    if (!file) return null;
    return {
      sizeKb: (file.size / 1024).toFixed(1),
      name: file.name,
      type: file.type,
    };
  }, [file]);

  const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
    const selected = event.target.files?.[0];
    if (!selected) return;

    if (!ALLOWED_TYPES.includes(selected.type)) {
      toast.error('Only JPG, PNG, and WebP files are allowed.');
      return;
    }

    if (selected.size > MAX_FILE_SIZE) {
      toast.error('File must be smaller than 5MB.');
      return;
    }

    setFile(selected);
    try {
      const dataUrl = await readFileAsDataUrl(selected);
      setPreview(dataUrl);
    } catch (error) {
      const message = error instanceof Error ? error.message : 'Failed to preview file';
      toast.error(message);
    }
  };

  const handleUpload = async () => {
    if (!file || !preview || !orderId) {
      toast.error('Choose a screenshot first.');
      return;
    }

    setIsUploading(true);
    try {
      const response = await fetch('/api/payin/upload-screenshot', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          mOrderId: orderId,
          fileName: file.name,
          fileSize: file.size,
          mimeType: file.type,
          data: preview,
        }),
      });

      const data = await response.json();
      if (!response.ok) {
        throw new Error(data.error || 'Upload failed');
      }

      setUploaded(true);
      toast.success('Screenshot uploaded successfully.');
    } catch (error) {
      const message = error instanceof Error ? error.message : 'Upload failed';
      toast.error(message);
    } finally {
      setIsUploading(false);
    }
  };

  return (
    <main className="min-h-screen bg-black text-white sm:px-4 sm:py-6">
      <div className="mx-auto flex min-h-screen w-full max-w-3xl items-stretch justify-center">
        <Card className="flex min-h-screen w-full rounded-none border-x-0 border-y-0 border-white/10 bg-[#0a0a0a] text-white shadow-none sm:min-h-0 sm:rounded-2xl sm:border sm:shadow-2xl sm:shadow-black/50">
          <CardHeader className="space-y-4 px-4 pt-5 sm:px-6 sm:pt-6">
            <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
              <div className="min-w-0">
                <Badge variant="outline" className="mb-3 border-white/10 bg-white/[0.03] text-[10px] text-white/65 sm:text-xs">
                  Screenshot upload
                </Badge>
                <CardTitle className="text-xl tracking-tight sm:text-2xl">Upload payment screenshot</CardTitle>
                <CardDescription className="mt-1 text-sm text-white/55">
                  Add a clear proof of payment for quick verification.
                </CardDescription>
              </div>
              {!uploaded && (
                <div className="self-start">
                  <ImageIcon className="h-6 w-6 text-white/45 sm:h-7 sm:w-7" />
                </div>
              )}
            </div>

            <div className="grid gap-3 rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-4">
              <div className="min-w-0">
                <p className="text-[10px] uppercase tracking-[0.18em] text-white/40 sm:text-[11px]">Order ID</p>
                <p className="mt-1 break-all font-mono text-xs text-white sm:text-sm">{orderId}</p>
              </div>
              <div className="inline-flex w-fit max-w-full items-center gap-2 rounded-full border border-white/10 px-3 py-1 text-[10px] uppercase tracking-[0.18em] text-white/50 sm:text-[11px]">
                <ShieldCheck className="h-3.5 w-3.5 shrink-0" />
                <span className="truncate">Secure upload</span>
              </div>
            </div>

            <Separator className="bg-white/10" />
          </CardHeader>

          <CardContent className="space-y-4 px-4 pb-5 sm:space-y-5 sm:px-6">
            {uploaded ? (
              <div className="rounded-xl border border-white/10 bg-white/[0.03] p-5 text-center sm:p-6">
                <CheckCircle2 className="mx-auto mb-3 h-9 w-9 text-white sm:h-10 sm:w-10" />
                <p className="text-base font-medium text-white sm:text-lg">Upload complete</p>
                <p className="mt-2 text-sm text-white/55">
                  Your screenshot has been submitted successfully.
                </p>
              </div>
            ) : (
              <>
                <div className="space-y-3">
                  <div className="space-y-2">
                    <Label htmlFor="screenshot" className="text-xs uppercase tracking-[0.18em] text-white/45">
                      Choose image
                    </Label>
                    <input
                      ref={inputRef}
                      id="screenshot"
                      type="file"
                      accept="image/png,image/jpeg,image/jpg,image/webp"
                      onChange={handleFileChange}
                      disabled={isUploading}
                      className="sr-only"
                    />
                    <Button
                      type="button"
                      variant="outline"
                      onClick={() => inputRef.current?.click()}
                      disabled={isUploading}
                      className="h-12 w-full justify-center border-white/10 bg-white/[0.03] px-4 text-white hover:bg-white/10"
                    >
                      <ImageIcon className="h-4 w-4" />
                      {file ? 'Choose different screenshot' : 'Choose screenshot'}
                    </Button>
                    <p className="text-xs text-white/45">Accepted: JPG, PNG, WebP up to 5MB.</p>
                  </div>
                </div>

                {preview && (
                  <div className="space-y-3">
                    <div className="overflow-hidden rounded-2xl border border-white/10 bg-white/[0.03] p-2 sm:p-3">
                      <div className="relative h-56 w-full overflow-hidden rounded-xl border border-white/10 bg-black sm:h-72">
                        <img
                          src={preview}
                          alt="Screenshot preview"
                          className="h-full w-full object-cover"
                        />
                      </div>
                    </div>
                    {fileMeta && (
                      <div className="flex flex-wrap items-center gap-x-4 gap-y-2 rounded-xl border border-white/10 bg-white/[0.03] px-3 py-2 text-xs text-white/65">
                        <span className="min-w-0 truncate">
                          <span className="mr-1 text-white/35">File:</span>
                          {fileMeta.name}
                        </span>
                        <span>
                          <span className="mr-1 text-white/35">Type:</span>
                          {fileMeta.type}
                        </span>
                        <span>
                          <span className="mr-1 text-white/35">Size:</span>
                          {fileMeta.sizeKb} KB
                        </span>
                      </div>
                    )}
                  </div>
                )}
              </>
            )}
          </CardContent>

          <CardFooter className="mt-auto flex justify-end border-t border-white/10 px-4 py-4 sm:px-6">
            {!uploaded && (
              <Button
                onClick={handleUpload}
                disabled={!file || isUploading}
                className="h-12 w-full bg-white text-black hover:bg-white/90 sm:w-auto"
              >
                {isUploading ? (
                  <>
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                    Uploading
                  </>
                ) : (
                  <>
                    <Upload className="mr-2 h-4 w-4" />
                    Upload screenshot
                  </>
                )}
              </Button>
            )}
          </CardFooter>
        </Card>
      </div>
    </main>
  );
}