marketplace/client/src/pages/ProductDetailPage.tsx

import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Heart, MapPin, Eye, Star, MessageSquare, Share2, Flag, Pencil } from 'lucide-react';
import { Card } from '../components/ui/Card';
import { GradientButton } from '../components/ui/GradientButton';
import { Button } from '../components/ui/Button';
import { Badge } from '../components/ui/Badge';
import { Avatar } from '../components/ui/Avatar';
import { Modal } from '../components/ui/Modal';
import { Input } from '../components/ui/Input';
import { api } from '../api/client';
import { useAuth } from '../context/AuthContext';
import { formatCurrency, formatDate } from '../utils/format';
import type { Listing } from '../types';

export function ProductDetailPage() {
  const { id } = useParams();
  const navigate = useNavigate();
  const { user, isAuthenticated } = useAuth();
  const [listing, setListing] = useState<Listing | null>(null);
  const [loading, setLoading] = useState(true);
  const [isFav, setIsFav] = useState(false);
  const [showOffer, setShowOffer] = useState(false);
  const [showEdit, setShowEdit] = useState(false);
  const [offerAmount, setOfferAmount] = useState('');
  const [offerMessage, setOfferMessage] = useState('');
  const [offerError, setOfferError] = useState('');

  // Edit form state
  const [editTitle, setEditTitle] = useState('');
  const [editPrice, setEditPrice] = useState('');
  const [editCondition, setEditCondition] = useState('');
  const [editDescription, setEditDescription] = useState('');
  const [editSaving, setEditSaving] = useState(false);
  const [editError, setEditError] = useState('');

  useEffect(() => {
    if (!id) return;
    api.get<Listing>(`/listings/${id}`)
      .then(data => {
        setListing(data);
        setIsFav(data.isFavorited ?? false);
      })
      .catch(() => setListing(null))
      .finally(() => setLoading(false));
  }, [id]);

  const handleFavorite = async () => {
    if (!listing || !isAuthenticated) return;
    try {
      const res = await api.post<{ isFavorited: boolean }>(`/listings/${listing.id}/favorite`);
      setIsFav(res.isFavorited);
    } catch {}
  };

  const handleSendOffer = async () => {
    if (!listing || !offerAmount) return;
    setOfferError('');
    try {
      await api.post('/offers', {
        amount: parseFloat(offerAmount),
        message: offerMessage || undefined,
        listingId: listing.id,
      });
      setShowOffer(false);
      setOfferAmount('');
      setOfferMessage('');
    } catch (err: unknown) {
      setOfferError(err instanceof Error ? err.message : 'Failed to send offer');
    }
  };

  const handleOpenEdit = () => {
    if (!listing) return;
    setEditTitle(listing.title);
    setEditPrice(String(listing.price));
    setEditCondition(listing.condition);
    setEditDescription(listing.description);
    setEditError('');
    setShowEdit(true);
  };

  const handleSaveEdit = async () => {
    if (!listing) return;
    setEditSaving(true);
    setEditError('');
    try {
      const updated = await api.put<Listing>(`/listings/${listing.id}`, {
        title: editTitle,
        price: parseFloat(editPrice),
        condition: editCondition,
        description: editDescription,
      });
      setListing(updated);
      setShowEdit(false);
    } catch (err) {
      setEditError(err instanceof Error ? err.message : 'Failed to save changes');
    } finally {
      setEditSaving(false);
    }
  };

  const handleDelete = async () => {
    if (!listing) return;
    if (!confirm('Are you sure you want to delete this listing?')) return;
    try {
      await api.delete(`/listings/${listing.id}`);
      navigate('/');
    } catch {}
  };

  const handleMessage = async () => {
    if (!listing || !isAuthenticated) return;
    try {
      const conversation = await api.post<{ id: string }>('/chat/conversations', {
        recipientId: listing.seller.id,
        listingId: listing.id,
      });
      navigate('/dashboard/messages', { state: { conversationId: conversation.id } });
    } catch {}
  };

  if (loading) return <div className="max-w-7xl mx-auto px-4 py-12 text-center text-gray-500">Loading...</div>;
  if (!listing) return <div className="max-w-7xl mx-auto px-4 py-12 text-center text-gray-500">Listing not found</div>;

  const isOwner = user?.id === listing.sellerId;
  const conditionVariant = listing.condition === 'NEW' ? 'success' : listing.condition === 'LIKE_NEW' ? 'info' : 'default';
  const hasImages = listing.images && listing.images.length > 0;
  const categoryEmoji = listing.category === 'FURNITURE' ? '\uD83E\uDE91' : listing.category === 'ELECTRONICS' ? '\uD83C\uDFA7' : listing.category === 'CLOTHING' ? '\uD83D\uDC55' : listing.category === 'HOME_GARDEN' ? '\u2615' : '\uD83D\uDCE6';

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 py-8">
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
        {/* Images */}
        <div>
          <div className="aspect-square bg-gradient-to-br from-primary-50 to-pink-50 rounded-2xl flex items-center justify-center mb-4 overflow-hidden">
            {hasImages ? (
              <img src={listing.images[0].url} alt={listing.title} className="w-full h-full object-cover" />
            ) : (
              <span className="text-8xl">{categoryEmoji}</span>
            )}
          </div>
          <div className="grid grid-cols-4 gap-2">
            {(hasImages ? listing.images.slice(0, 4) : [0, 1, 2, 3]).map((img, i) => (
              <div key={i} className="aspect-square bg-gradient-to-br from-primary-50 to-pink-50 rounded-xl flex items-center justify-center cursor-pointer hover:ring-2 hover:ring-primary-400 transition-all overflow-hidden">
                {typeof img === 'object' && 'url' in img ? (
                  <img src={img.url} alt="" className="w-full h-full object-cover" />
                ) : (
                  <span className="text-2xl">{categoryEmoji}</span>
                )}
              </div>
            ))}
          </div>
        </div>

        {/* Details */}
        <div className="space-y-6">
          <div>
            <div className="flex items-start justify-between">
              <div>
                <h1 className="text-2xl font-bold text-gray-900">{listing.title}</h1>
                <div className="flex items-center gap-3 mt-2">
                  <Badge variant={conditionVariant} size="md">{listing.condition.replace('_', ' ')}</Badge>
                  <span className="flex items-center gap-1 text-sm text-gray-400">
                    <Eye className="w-4 h-4" /> {listing.viewCount} views
                  </span>
                </div>
              </div>
              <div className="flex items-center gap-1">
                {isOwner && (
                  <button onClick={handleOpenEdit} className="p-2 rounded-xl hover:bg-gray-100 transition-colors cursor-pointer" title="Edit listing">
                    <Pencil className="w-5 h-5 text-gray-400" />
                  </button>
                )}
                <button onClick={handleFavorite} className="p-2 rounded-xl hover:bg-gray-100 transition-colors cursor-pointer">
                  <Heart className={`w-6 h-6 ${isFav ? 'fill-pink-500 text-pink-500' : 'text-gray-400'}`} />
                </button>
              </div>
            </div>
            <p className="text-3xl font-bold text-primary-600 mt-4">
              {formatCurrency(listing.price)}
              {listing.obo && <span className="text-sm font-normal text-gray-400 ml-2">or best offer</span>}
            </p>
          </div>

          {!isOwner && (
            <div className="flex gap-3">
              <GradientButton className="flex-1" size="lg" onClick={() => setShowOffer(true)}>
                Make Offer
              </GradientButton>
              <Button variant="outline" size="lg" onClick={handleMessage}>
                <MessageSquare className="w-4 h-4 mr-2" /> Message
              </Button>
            </div>
          )}

          <Card>
            <div className="flex items-center gap-4">
              <Avatar name={listing.seller.fullName} src={listing.seller.avatar} size="lg" />
              <div className="flex-1">
                <h3 className="font-semibold text-gray-900">{listing.seller.fullName}</h3>
                <div className="flex items-center gap-2 mt-1">
                  {listing.seller.rating !== undefined && (
                    <>
                      <Star className="w-4 h-4 text-yellow-400 fill-yellow-400" />
                      <span className="text-sm font-medium">{listing.seller.rating}</span>
                    </>
                  )}
                  <span className="text-xs text-gray-400">Joined {formatDate(listing.seller.createdAt)}</span>
                </div>
              </div>
            </div>
          </Card>

          <Card>
            <h3 className="font-semibold text-gray-900 mb-3">Item Description</h3>
            <p className="text-sm text-gray-600 leading-relaxed">{listing.description}</p>
          </Card>

          <Card>
            <h3 className="font-semibold text-gray-900 mb-2">Location</h3>
            <p className="flex items-center gap-2 text-sm text-gray-600">
              <MapPin className="w-4 h-4 text-gray-400" /> {listing.location}
            </p>
          </Card>

          <div className="flex gap-4 text-sm text-gray-400">
            <button className="flex items-center gap-1 hover:text-gray-600 cursor-pointer"><Share2 className="w-4 h-4" /> Share</button>
            <button className="flex items-center gap-1 hover:text-gray-600 cursor-pointer"><Flag className="w-4 h-4" /> Report</button>
          </div>
        </div>
      </div>

      {/* Make Offer Modal */}
      <Modal isOpen={showOffer} onClose={() => setShowOffer(false)} title="Make Offer" size="sm">
        <p className="text-sm text-gray-500 mb-4">Enter your offer amount and message to the seller</p>
        {offerError && <p className="text-sm text-red-500 mb-3">{offerError}</p>}
        <div className="space-y-4 mb-6">
          <Input label="Your Offer" type="number" placeholder="100" value={offerAmount} onChange={(e) => setOfferAmount(e.target.value)} />
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1.5">Message</label>
            <textarea value={offerMessage} onChange={(e) => setOfferMessage(e.target.value)} rows={3}
              placeholder="Enter your message to the seller"
              className="w-full rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm placeholder:text-gray-400 focus:border-primary-400 focus:ring-2 focus:ring-primary-100 focus:outline-none resize-none" />
          </div>
        </div>
        <div className="flex gap-3">
          <Button variant="secondary" className="flex-1" onClick={() => setShowOffer(false)}>Back</Button>
          <GradientButton className="flex-1" onClick={handleSendOffer}>Send Offer</GradientButton>
        </div>
      </Modal>

      {/* Edit Item Modal */}
      <Modal isOpen={showEdit} onClose={() => setShowEdit(false)} title="Edit Item Info" size="md">
        {editError && <p className="text-sm text-red-500 mb-3">{editError}</p>}
        <div className="space-y-4 mb-6">
          <Input label="Title" value={editTitle} onChange={(e) => setEditTitle(e.target.value)} />
          <Input label="Price" type="number" value={editPrice} onChange={(e) => setEditPrice(e.target.value)} />
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1.5">Condition</label>
            <select value={editCondition} onChange={(e) => setEditCondition(e.target.value)}
              className="w-full rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm focus:border-primary-400 focus:outline-none">
              <option value="NEW">New</option><option value="LIKE_NEW">Like New</option><option value="GENTLY_USED">Gently Used</option><option value="USED">Used</option><option value="FAIR">Fair</option>
            </select>
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1.5">Description</label>
            <textarea value={editDescription} onChange={(e) => setEditDescription(e.target.value)} rows={3}
              className="w-full rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm focus:border-primary-400 focus:outline-none resize-none" />
          </div>
        </div>
        <div className="flex gap-3">
          <Button variant="danger" className="mr-auto" onClick={handleDelete}>Delete Listing</Button>
          <Button variant="secondary" onClick={() => setShowEdit(false)}>Cancel</Button>
          <GradientButton onClick={handleSaveEdit} disabled={editSaving}>
            {editSaving ? 'Saving...' : 'Save Changes'}
          </GradientButton>
        </div>
      </Modal>
    </div>
  );
}