import React from 'react';
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { 
  MapPin, 
  Bookmark, 
  BookOpen, 
  Image as ImageIcon,
  LayoutDashboard
} from 'lucide-react';
import MyTrips from './MyTrips';
import Bookmarks from './Bookmarks';
import Journal from './Journal';
import { useAuth } from '@/contexts/AuthContext';
import { Navigate, useSearchParams } from 'react-router-dom';

export default function Dashboard() {
  const { profile, loading } = useAuth();
  const [searchParams, setSearchParams] = useSearchParams();
  const activeTab = searchParams.get('tab') || 'trips';

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-[60vh]">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
      </div>
    );
  }

  if (!profile) {
    return <Navigate to="/sign-in" replace />;
  }

  const handleTabChange = (value: string) => {
    setSearchParams({ tab: value });
  };

  return (
    <div className="min-h-screen bg-background">
      <div className="container mx-auto px-4 py-8">
        <div className="flex items-center gap-3 mb-8">
          <div className="w-12 h-12 rounded-2xl bg-primary/10 flex items-center justify-center text-primary">
            <LayoutDashboard className="h-6 w-6" />
          </div>
          <div>
            <h1 className="text-3xl font-bold tracking-tight">Kontrol Paneli</h1>
            <p className="text-muted-foreground">Seyahatlerinizi, kayıtlı yerlerinizi ve anılarınızı buradan yönetin.</p>
          </div>
        </div>

        <Tabs value={activeTab} onValueChange={handleTabChange} className="space-y-8">
          <TabsList className="grid w-full grid-cols-2 md:w-auto md:flex bg-muted/50 p-1 rounded-xl">
            <TabsTrigger value="trips" className="rounded-lg gap-2 data-[state=active]:bg-background data-[state=active]:shadow-sm">
              <MapPin className="h-4 w-4" />
              <span className="hidden sm:inline">Seyahatlerim</span>
              <span className="sm:hidden">Seyahatler</span>
            </TabsTrigger>
            <TabsTrigger value="bookmarks" className="rounded-lg gap-2 data-[state=active]:bg-background data-[state=active]:shadow-sm">
              <Bookmark className="h-4 w-4" />
              <span className="hidden sm:inline">Kaydedilenler</span>
              <span className="sm:hidden">Kayıtlar</span>
            </TabsTrigger>
            <TabsTrigger value="journal" className="rounded-lg gap-2 data-[state=active]:bg-background data-[state=active]:shadow-sm">
              <BookOpen className="h-4 w-4" />
              <span className="hidden sm:inline">Seyahat Günlüğü</span>
              <span className="sm:hidden">Günlük</span>
            </TabsTrigger>
            <TabsTrigger value="photos" className="rounded-lg gap-2 data-[state=active]:bg-background data-[state=active]:shadow-sm">
              <ImageIcon className="h-4 w-4" />
              <span className="hidden sm:inline">Fotoğraflarım</span>
              <span className="sm:hidden">Fotoğraflar</span>
            </TabsTrigger>
          </TabsList>

          <TabsContent value="trips" className="mt-0 focus-visible:outline-none outline-none">
            <MyTrips />
          </TabsContent>

          <TabsContent value="bookmarks" className="mt-0 focus-visible:outline-none outline-none">
            <Bookmarks />
          </TabsContent>

          <TabsContent value="journal" className="mt-0 focus-visible:outline-none outline-none">
            <Journal />
          </TabsContent>

          <TabsContent value="photos" className="mt-0 focus-visible:outline-none outline-none">
            <div className="container mx-auto px-4 py-8">
              <div className="bg-card rounded-3xl border shadow-sm p-12 text-center">
                <div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-6">
                  <ImageIcon className="h-10 w-10 text-primary" />
                </div>
                <h2 className="text-2xl font-bold mb-2">Fotoğraf Galerisi</h2>
                <p className="text-muted-foreground mb-8 max-w-md mx-auto">
                  Seyahatlerinizde çektiğiniz fotoğrafları burada görebilirsiniz. 
                  Günlük sayfasına fotoğraf ekleyerek galeriyi doldurmaya başlayın.
                </p>
                <Tabs defaultValue="all">
                  <TabsList className="mb-8">
                    <TabsTrigger value="all">Tüm Fotoğraflar</TabsTrigger>
                    <TabsTrigger value="albums">Albümler</TabsTrigger>
                  </TabsList>
                  <TabsContent value="all">
                    <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
                      {/* Placeholder for photos */}
                      {[1, 2, 3, 4, 5, 6].map((i) => (
                        <div key={i} className="aspect-square rounded-2xl bg-muted animate-pulse"></div>
                      ))}
                    </div>
                  </TabsContent>
                </Tabs>
              </div>
            </div>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  );
}
