import { useState } from "react";
import { useSession, signIn } from "next-auth/react";
import Layout from "../components/ui/Layout";
import { Card, CardHeader, CardContent, CardTitle, Button, Tabs, TabsTrigger, TabsContent } from "../components/ui/components";
import Generator from "../components/templates/generator";
import Manual from "../components/templates/manual";
import { ChartBarIcon, PencilIcon, ArrowRightOnRectangleIcon as LoginIcon } from '@heroicons/react/24/outline';

export default function Home() {
	const { data: session } = useSession();
	const [selectedTab, setSelectedTab] = useState(0);

	if (session) {
		return (
			<Layout title="Wastpol - Profil przekroju terenu">
				<div className="p-6 max-w-7xl mx-auto">
					{/* Page Header */}
					<div className="mb-8">
						<h1 className="text-3xl font-bold text-gray-900 mb-2">
							Generator profilu przekroju terenu
						</h1>
						<p className="text-gray-600">
							Twórz profesjonalne profile terenowe na podstawie danych z Geoportalu lub wprowadzonych ręcznie
						</p>
					</div>

					{/* Main Content Card */}
					<Card className="mb-6">
						<CardHeader className="border-b bg-gray-50">
							<Tabs value={selectedTab} onValueChange={setSelectedTab}>
								<TabsTrigger>
									<ChartBarIcon className="w-5 h-5 mr-2" />
									Automatyczny
								</TabsTrigger>
								<TabsTrigger>
									<PencilIcon className="w-5 h-5 mr-2" />
									Ręczny
								</TabsTrigger>
							</Tabs>
						</CardHeader>
						
						<CardContent className="p-0">
							<TabsContent isActive={selectedTab === 0}>
								<div className="p-6">
									<Generator />
								</div>
							</TabsContent>
							<TabsContent isActive={selectedTab === 1}>
								<div className="p-6">
									<Manual />
								</div>
							</TabsContent>
						</CardContent>
					</Card>

					{/* Info Cards */}
					<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
						<Card>
							<CardContent>
								<div className="flex items-center space-x-3">
									<div className="p-2 bg-blue-100 rounded-lg">
										<ChartBarIcon className="w-6 h-6 text-blue-600" />
									</div>
									<div>
										<h3 className="font-semibold text-gray-900">Automatyczny</h3>
										<p className="text-sm text-gray-600">Import danych z Geoportalu</p>
									</div>
								</div>
							</CardContent>
						</Card>

						<Card>
							<CardContent>
								<div className="flex items-center space-x-3">
									<div className="p-2 bg-green-100 rounded-lg">
										<PencilIcon className="w-6 h-6 text-green-600" />
									</div>
									<div>
										<h3 className="font-semibold text-gray-900">Ręczny</h3>
										<p className="text-sm text-gray-600">Wprowadź punkty manualnie</p>
									</div>
								</div>
							</CardContent>
						</Card>

						<Card>
							<CardContent>
								<div className="flex items-center space-x-3">
									<div className="p-2 bg-purple-100 rounded-lg">
										<svg className="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
											<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" />
										</svg>
									</div>
									<div>
										<h3 className="font-semibold text-gray-900">Export DXF</h3>
										<p className="text-sm text-gray-600">Pobierz gotowy rysunek</p>
									</div>
								</div>
							</CardContent>
						</Card>
					</div>
				</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 narzędzi inżynierskich</p>
				</CardHeader>
				<CardContent>
					<Button 
						onClick={() => signIn()} 
						className="w-full"
						size="lg"
					>
						<LoginIcon className="w-5 h-5 mr-2" />
						Zaloguj się
					</Button>
				</CardContent>
			</Card>
		</div>
	);
}