import { useParams } from 'react-router-dom';
import { useSeoMeta } from '@unhead/react';
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';
import { useTranslation } from '@/contexts/language';

/**
 * 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 { t } = useTranslation();
  const { pubkey, identifier } = useParams<{ pubkey: string; identifier: string }>();
  const { user } = useCurrentUser();
  const { data: tour, isLoading, error } = useTour(identifier || '', pubkey);

  useSeoMeta({
    title: tour?.title ? `Edit ${tour.title} - SkateSpots` : 'Edit Tour - SkateSpots',
    description: 'Edit your skate tour — update stops, dates and details.',
  });

  if (isLoading) {
    return (
      <>
        <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>
      </>
    );
  }

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

  if (!user) {
    return (
      <>
        <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">{t('errors.loginRequired')}</h2>
              <p className="text-muted-foreground mb-6">{t('placesUi.editTour.loginToEdit')}</p>
              <LoginArea className="justify-center" />
            </CardContent>
          </Card>
        </div>
      </>
    );
  }

  if (user.pubkey !== tour.pubkey) {
    return (
      <>
        <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">{t('placesUi.editEvent.accessDenied')}</h2>
              <p className="text-muted-foreground">{t('placesUi.editTour.accessDeniedDesc')}</p>
            </CardContent>
          </Card>
        </div>
      </>
    );
  }

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