'use client';

import { useState } from 'react';
import { FileText, X } from 'lucide-react';
import { cn } from '@/lib/utils';
import { FeedMediaItem } from '@kres/types';
import { Button } from '@/components/ui/button';
import { Dialog, DialogContent } from '@/components/ui/dialog';

interface PostMediaProps {
  media: FeedMediaItem[];
}

export function PostMedia({ media }: PostMediaProps) {
  const [selectedImage, setSelectedImage] = useState<FeedMediaItem | null>(null);

  if (media.length === 0) return null;

  const openImage = (item: FeedMediaItem) => {
    if (item.type === 'IMAGE') {
      setSelectedImage(item);
    }
  };

  return (
    <>
      <div className="grid gap-2 px-5 pb-5">
        {media.map((item) => {
          if (item.type === 'IMAGE') {
            return (
              <div
                key={item.id}
                onClick={() => openImage(item)}
                className={cn(
                  'relative rounded-xl overflow-hidden cursor-pointer group',
                  media.length === 1 ? 'aspect-video' : 'aspect-[4/3]',
                )}
              >
                <img
                  src={item.url}
                  alt={item.fileName || 'Media'}
                  className="w-full h-full object-cover transition-transform duration-200 group-hover:scale-105"
                  loading="lazy"
                />
                <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors" />
              </div>
            );
          }

          if (item.type === 'VIDEO') {
            return (
              <div key={item.id} className="rounded-xl overflow-hidden bg-black">
                <video
                  src={item.url}
                  controls
                  className="w-full max-h-[400px]"
                  preload="metadata"
                />
              </div>
            );
          }

          return (
            <div
              key={item.id}
              className="flex items-center gap-3 p-3 rounded-xl border border-gray-200"
            >
              <div className="flex items-center justify-center w-10 h-10 rounded-lg bg-red-50 text-red-600">
                <FileText size={20} />
              </div>
              <div className="flex-1 min-w-0">
                <p className="text-sm font-medium text-gray-900 truncate">{item.fileName}</p>
                {item.fileSize && (
                  <p className="text-xs text-gray-500">
                    {(item.fileSize / 1024 / 1024).toFixed(2)} MB
                  </p>
                )}
              </div>
              <a
                href={item.url}
                download={item.fileName}
                className="flex items-center justify-center px-3 py-1.5 bg-violet-50 text-violet-700 rounded-lg text-xs font-medium hover:bg-violet-100"
              >
                İndir
              </a>
            </div>
          );
        })}
      </div>

      <Dialog open={!!selectedImage} onOpenChange={(open) => !open && setSelectedImage(null)}>
        <DialogContent className="max-w-4xl p-0">
          {selectedImage && (
            <div className="relative">
              <img
                src={selectedImage.url}
                alt={selectedImage.fileName}
                className="w-full h-auto max-h-[80vh] object-contain"
              />
              <button
                onClick={() => setSelectedImage(null)}
                className="absolute top-4 right-4 p-2 bg-black/50 text-white rounded-full hover:bg-black/70 transition-colors"
              >
                <X size={20} />
              </button>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </>
  );
}