import { Head } from '@inertiajs/react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { ArrowLeft, Play, Download, Share2 } from 'lucide-react';
import { Link } from '@inertiajs/react';
import { route } from 'ziggy-js';

interface MemeMedia {
  ids: string;
  name: string;
  description: string;
  keywords: string[];
  action_keywords: string[];
  emotion_keywords: string[];
  misc_keywords: string[];
  mov_url: string;
  webm_url: string;
  gif_url: string;
  webp_url: string;
  slug: string;
}

interface Props {
  meme: MemeMedia;
  relatedMemes: MemeMedia[];
}

export default function MemeShow({ meme, relatedMemes }: Props) {
  const allKeywords = [
    ...(meme.keywords || []),
    ...(meme.action_keywords || []),
    ...(meme.emotion_keywords || []),
    ...(meme.misc_keywords || [])
  ].filter(Boolean);

  return (
    <>
      <Head title={`${meme.name} - Meme Template`} />
      <Head>
        <meta name="description" content={meme.description} />
        <meta name="keywords" content={allKeywords.join(', ')} />
        <meta property="og:title" content={`${meme.name} - Meme Template`} />
        <meta property="og:description" content={meme.description} />
        <meta property="og:image" content={meme.webp_url} />
        <meta property="og:type" content="video.other" />
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content={`${meme.name} - Meme Template`} />
        <meta name="twitter:description" content={meme.description} />
        <meta name="twitter:image" content={meme.webp_url} />
      </Head>
      
      <div className="min-h-screen bg-gradient-to-br from-purple-50 to-pink-50">
        <div className="container mx-auto px-4 py-8">
          {/* Header */}
          <div className="flex items-center gap-4 mb-8">
            <Link href={route('memes.index')}>
              <Button variant="outline" size="sm">
                <ArrowLeft className="h-4 w-4 mr-2" />
                Back to Memes
              </Button>
            </Link>
            <div>
              <h1 className="text-3xl font-bold text-gray-900">{meme.name}</h1>
              <p className="text-gray-600 mt-2">{meme.description}</p>
            </div>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            {/* Main Content */}
            <div className="lg:col-span-2">
              <Card>
                <CardContent className="p-6">
                  {/* Video Preview */}
                  <div className="aspect-[9/16] bg-black rounded-lg overflow-hidden mb-6 max-w-md mx-auto">
                    <video
                      src={meme.webm_url}
                      poster={meme.webp_url}
                      controls
                      className="w-full h-full object-cover"
                      preload="metadata"
                    />
                  </div>

                  {/* Action Buttons */}
                  <div className="flex flex-wrap gap-3 justify-center">
                    <Button className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700">
                      <Play className="h-4 w-4 mr-2" />
                      Create Meme
                    </Button>
                    <Button variant="outline">
                      <Download className="h-4 w-4 mr-2" />
                      Download
                    </Button>
                    <Button variant="outline">
                      <Share2 className="h-4 w-4 mr-2" />
                      Share
                    </Button>
                  </div>
                </CardContent>
              </Card>
            </div>

            {/* Sidebar */}
            <div className="space-y-6">
              {/* Keywords */}
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg">Keywords</CardTitle>
                  <CardDescription>
                    Related keywords for this meme template
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="flex flex-wrap gap-2">
                    {meme.action_keywords?.map((keyword, index) => (
                      <Badge key={`action-${index}`} variant="secondary" className="bg-blue-100 text-blue-800">
                        {keyword}
                      </Badge>
                    ))}
                    {meme.emotion_keywords?.map((keyword, index) => (
                      <Badge key={`emotion-${index}`} variant="secondary" className="bg-green-100 text-green-800">
                        {keyword}
                      </Badge>
                    ))}
                    {meme.misc_keywords?.map((keyword, index) => (
                      <Badge key={`misc-${index}`} variant="secondary" className="bg-gray-100 text-gray-800">
                        {keyword}
                      </Badge>
                    ))}
                  </div>
                </CardContent>
              </Card>

              {/* Related Memes */}
              {relatedMemes.length > 0 && (
                <Card>
                  <CardHeader>
                    <CardTitle className="text-lg">Related Memes</CardTitle>
                    <CardDescription>
                      Similar meme templates you might like
                    </CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="grid grid-cols-2 gap-3">
                      {relatedMemes.map((related) => (
                        <Link
                          key={related.ids}
                          href={route('memes.show', related.slug)}
                          className="block"
                        >
                          <div className="aspect-[9/16] bg-gray-100 rounded-lg overflow-hidden mb-2">
                            <img
                              src={related.webp_url}
                              alt={related.name}
                              className="w-full h-full object-cover hover:scale-105 transition-transform"
                            />
                          </div>
                          <p className="text-sm font-medium text-gray-900 truncate">
                            {related.name}
                          </p>
                        </Link>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              )}
            </div>
          </div>
        </div>
      </div>
    </>
  );
}