import { useSeoMeta } from '@unhead/react';
import { Link, 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 { CrewForm } from '@/components/CrewForm';
import { useCurrentUser } from '@/hooks/useCurrentUser';
import { useCrew } from '@/hooks/useCrews';
import NotFound from './NotFound';
import { Users, ArrowLeft } from 'lucide-react';

export default function EditCrewPage() {
  const { pubkey, identifier } = useParams<{ pubkey: string; identifier: string }>();
  const { user } = useCurrentUser();
  const { data: crew, isLoading } = useCrew(identifier || '', pubkey);

  useSeoMeta({
    title: crew ? `Edit ${crew.name} - SkateSpots` : 'Edit Crew - SkateSpots',
    description: 'Edit your skate crew.',
  });

  if (!user) {
    return (
      <Layout>
        <div className="container px-4 py-8">
          <Card className="max-w-xl mx-auto bg-gray-900 border-gray-700">
            <CardContent className="py-12 text-center">
              <Users className="h-12 w-12 mx-auto mb-4 text-gray-600" />
              <h2 className="text-xl font-bold mb-2">Login Required</h2>
              <LoginArea className="justify-center max-w-60 mx-auto" />
            </CardContent>
          </Card>
        </div>
      </Layout>
    );
  }

  if (isLoading) {
    return (
      <Layout>
        <div className="container px-4 py-8 max-w-2xl">
          <Skeleton className="h-6 w-32 mb-6" />
          <Skeleton className="h-[600px] w-full" />
        </div>
      </Layout>
    );
  }

  if (!crew) return <NotFound />;

  // Only the crew's founder can edit it
  if (crew.pubkey !== user.pubkey) {
    return (
      <Layout>
        <div className="container px-4 py-8">
          <Card className="max-w-xl mx-auto bg-gray-900 border-gray-700">
            <CardContent className="py-12 text-center">
              <Users className="h-12 w-12 mx-auto mb-4 text-gray-600" />
              <h2 className="text-xl font-bold mb-2">Not your crew</h2>
              <p className="text-gray-400">Only the crew founder can edit this crew.</p>
            </CardContent>
          </Card>
        </div>
      </Layout>
    );
  }

  return (
    <Layout>
      <div className="container px-4 sm:px-6 py-6 sm:py-8 max-w-2xl">
        <div className="mb-6">
          <Link to={`/crew/${crew.pubkey}/${crew.identifier}`} className="inline-flex items-center text-gray-400 hover:text-white transition-colors mb-4">
            <ArrowLeft className="h-4 w-4 mr-2" />
            Back to Crew
          </Link>
          <h1 className="text-3xl font-black uppercase text-teal-400" style={{ fontFamily: 'Impact, "Arial Black", sans-serif' }}>
            Edit Crew
          </h1>
        </div>
        <CrewForm existing={crew} />
      </div>
    </Layout>
  );
}