import { useState, useCallback } from "react";
import { useSession, signIn } from "next-auth/react";
import Layout from "../components/ui/Layout";
import { Card, CardHeader, CardContent, CardTitle, CardDescription, Button, Alert } from "../components/ui/components";
import { 
	FileUploader,
	FileCard,
} from "evergreen-ui";
import { CloudArrowUpIcon as CloudUploadIcon, ArrowDownTrayIcon as DownloadIcon, Squares2X2Icon as GridIcon } from '@heroicons/react/24/outline';
import axios from "axios";

export default function Cross() {
	const { data: session } = useSession();
	const [files, setFiles] = useState([]);
	const [fileRejections, setFileRejections] = useState([]);
	const [fileData, setFileData] = useState(null);
	const [isLoading, setIsLoading] = useState(false);
	
	const handleChange = useCallback((files) => setFiles([files[0]]), []);
	const handleRejected = useCallback(
		(fileRejections) => setFileRejections([fileRejections[0]]),
		[]
	);
	const handleRemove = useCallback(() => {
		setFiles([]);
		setFileRejections([]);
	}, []);

	const handleSubmit = (e) => {
		e.preventDefault();
		setIsLoading(true);
		
		console.log("Files:", files);
		if (files.length === 0) {
			console.log("No files selected");
			setIsLoading(false);
			return;
		}

		const formData = new FormData();
		formData.append("files", files[0]);

		axios
			.post("/api/cross", formData, {
				headers: {
					"Content-Type": "multipart/form-data",
				},
			})
			.then((response) => {
				console.log(response.data);
				setFileData(response.data);
				setIsLoading(false);
			})
			.catch((error) => {
				console.error(error);
				setIsLoading(false);
			});
	};

	const handleDownload = () => {
		if (fileData) {
			document.getElementById("down").download = fileData.filename;
			document.getElementById("down").href = "cross.dxf";
			document.getElementById("down").click();
		}
	};

	if (session) {
		return (
			<Layout title="Wastpol - Generator siatki">
				<div className="p-6 max-w-4xl mx-auto">
					{/* Page Header */}
					<div className="mb-8">
						<div className="flex items-center space-x-3 mb-4">
							<div className="p-3 bg-blue-100 rounded-lg">
								<GridIcon className="w-8 h-8 text-blue-600" />
							</div>
							<div>
								<h1 className="text-3xl font-bold text-gray-900">Generator siatki</h1>
								<p className="text-gray-600">Przekształć pliki DXF na siatki instalacyjne</p>
							</div>
						</div>
					</div>

					<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
						{/* Upload Section */}
						<Card>
							<CardHeader>
								<CardTitle className="flex items-center space-x-2">
									<CloudUploadIcon className="w-5 h-5 text-blue-600" />
									<span>Prześlij plik</span>
								</CardTitle>
								<CardDescription>
									Wybierz plik DXF do przetworzenia (maksymalnie 50 MB)
								</CardDescription>
							</CardHeader>
							<CardContent>
								<div className="space-y-4">
									<FileUploader
										label="Przeciągnij i upuść plik lub kliknij aby wybrać"
										description="Obsługiwane formaty: DXF (max 50 MB)"
										maxSizeInBytes={50 * 1024 ** 2}
										maxFiles={1}
										onChange={handleChange}
										onRejected={handleRejected}
										renderFile={(file) => {
											const { name, size, type } = file;
											const fileRejection = fileRejections.find(
												(fileRejection) => fileRejection.file === file
											);
											const { message } = fileRejection || {};
											return (
												<FileCard
													key={name}
													isInvalid={fileRejection != null}
													name={name}
													onRemove={handleRemove}
													sizeInBytes={size}
													type={type}
													validationMessage={message}
												/>
											);
										}}
										values={files}
									/>
									
									<Button
										onClick={handleSubmit}
										disabled={files.length === 0 || isLoading}
										loading={isLoading}
										className="w-full"
									>
										{isLoading ? 'Przetwarzanie...' : 'Dodaj siatkę'}
									</Button>
								</div>
							</CardContent>
						</Card>

						{/* Results Section */}
						<Card>
							<CardHeader>
								<CardTitle className="flex items-center space-x-2">
									<DownloadIcon className="w-5 h-5 text-green-600" />
									<span>Wynik</span>
								</CardTitle>
								<CardDescription>
									Pobierz wygenerowany plik siatki
								</CardDescription>
							</CardHeader>
							<CardContent>
								{fileData ? (
									<div className="space-y-4">
										<Alert variant="success">
											<div className="flex items-center space-x-2">
												<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
													<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
												</svg>
												<span>Plik został pomyślnie przetworzony!</span>
											</div>
										</Alert>
										
										<Button
											onClick={handleDownload}
											variant="primary"
											className="w-full"
										>
											<DownloadIcon className="w-5 h-5 mr-2" />
											Pobierz siatką DXF
										</Button>
									</div>
								) : (
									<div className="text-center py-8">
										<div className="mx-auto w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
											<GridIcon className="w-8 h-8 text-gray-400" />
										</div>
										<p className="text-gray-500">Prześlij plik aby rozpocząć przetwarzanie</p>
									</div>
								)}
							</CardContent>
						</Card>
					</div>

					{/* Instructions */}
					<Card className="mt-8">
						<CardHeader>
							<CardTitle>Instrukcje</CardTitle>
						</CardHeader>
						<CardContent>
							<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
								<div className="flex items-start space-x-3">
									<div className="flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
										<span className="text-sm font-semibold text-blue-600">1</span>
									</div>
									<div>
										<h4 className="font-medium text-gray-900">Prześlij plik</h4>
										<p className="text-sm text-gray-600">Wybierz plik DXF z projektem</p>
									</div>
								</div>
								
								<div className="flex items-start space-x-3">
									<div className="flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
										<span className="text-sm font-semibold text-blue-600">2</span>
									</div>
									<div>
										<h4 className="font-medium text-gray-900">Przetwarzaj</h4>
										<p className="text-sm text-gray-600">Kliknij "Dodaj siatkę"</p>
									</div>
								</div>
								
								<div className="flex items-start space-x-3">
									<div className="flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
										<span className="text-sm font-semibold text-blue-600">3</span>
									</div>
									<div>
										<h4 className="font-medium text-gray-900">Pobierz</h4>
										<p className="text-sm text-gray-600">Zapisz gotową siatkę DXF</p>
									</div>
								</div>
							</div>
						</CardContent>
					</Card>

					<a href="the.dxf" download="the.dxf" id="down" className="hidden" />
				</div>
			</Layout>
		);
	}

	return (
		<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4">
			<Card className="w-full max-w-md">
				<CardHeader className="text-center">
					<div className="mx-auto w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
						<img src="/logo.png" alt="Wastpol" className="w-10 h-10" />
					</div>
					<CardTitle className="text-2xl">Zaloguj się</CardTitle>
					<p className="text-gray-600 mt-2">Uzyskaj dostęp do generatora siatki</p>
				</CardHeader>
				<CardContent>
					<Button onClick={() => signIn()} className="w-full" size="lg">
						Zaloguj się
					</Button>
				</CardContent>
			</Card>
		</div>
	);
}