import { useParams } from 'react-router-dom';
import { Layout } from '@/components/Layout';
import { Card, CardContent } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
import { LoginArea } from '@/components/auth/LoginArea';
import { useCurrentUser } from '@/hooks/useCurrentUser';
import { useTour } from '@/hooks/useTours';
import { Route, AlertTriangle } from 'lucide-react';
import CreateTourPage from './CreateTourPage';
import NotFound from './NotFound';

/**
 * Edit an existing tour. Loads the tour by pubkey + identifier and hands it to
 * CreateTourPage as `existing`, which prefills every field, reuses the same
 * addressable identifier, and preserves unmanaged tags on save. Only the tour's
 * owner may edit.
 */
export default function EditTourPage() {
  const { pubkey, identifier } = useParams<{ pubkey: string; identifier: string }>();
  const { user } = useCurrentUser();
  const { data: tour, isLoading, error } = useTour(identifier || '', pubkey);

  if (isLoading) {
    return (
      <Layout>
        <div className="container px-4 sm:px-6 py-6 sm:py-8 max-w-3xl space-y-4">
          <Skeleton className="h-6 w-32" />
          <Skeleton className="h-10 w-64" />
          <Skeleton className="h-40 w-full" />
          <Skeleton className="h-64 w-full" />
        </div>
      </Layout>
    );
  }

  if (error || !tour) {
    return <NotFound />;
  }

  if (!user) {
    return (
      <Layout>
        <div className="container px-4 py-8">
          <Card className="max-w-xl mx-auto border-dashed">
            <CardContent className="py-12 text-center">
              <Route className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
              <h2 className="text-xl font-bold mb-2">Login Required</h2>
              <p className="text-muted-foreground mb-6">You need to log in to edit this tour.</p>
              <LoginArea className="justify-center" />
            </CardContent>
          </Card>
        </div>
      </Layout>
    );
  }

  if (user.pubkey !== tour.pubkey) {
    return (
      <Layout>
        <div className="container px-4 py-8">
          <Card className="max-w-xl mx-auto border-destructive">
            <CardContent className="py-12 text-center">
              <AlertTriangle className="h-12 w-12 mx-auto mb-4 text-destructive" />
              <h2 className="text-xl font-bold mb-2">Access Denied</h2>
              <p className="text-muted-foreground">You can only edit tours you created.</p>
            </CardContent>
          </Card>
        </div>
      </Layout>
    );
  }

  return <CreateTourPage existing={tour} />;
}