import React from 'react';
import { Link, usePage } from '@inertiajs/react';
import { Card, CardContent } from "@/Components/ui/card";
import { Button } from "@/Components/ui/button";
import { Store, Star, MessageSquare, Building2 } from "lucide-react";
import { useTranslation } from '@/hooks/useTranslation';

export default function SupplierSidebar({ seller, storeMetrics = {}, setIsContactOpen }) {
    const { auth } = usePage().props;
    const { t } = useTranslation();
    
    const isOwner = auth.user?.id === seller?.id;
    const avgRating = storeMetrics?.avg_rating || 0;
    const responseTime = storeMetrics?.response_time || 'N/A';
    const storeViews = storeMetrics?.store_views || 0;

    // Smart Fallback: Use Store photos if available, else use Personal photos.
    const avatarUrl = seller?.store_avatar_path 
        ? `/storage/${seller.store_avatar_path}` 
        : seller?.avatar_path 
            ? `/storage/${seller.avatar_path}` 
            : null;

    const coverUrl = seller?.store_cover_path 
        ? `/storage/${seller.store_cover_path}` 
        : seller?.cover_path 
            ? `/storage/${seller.cover_path}` 
            : null;

    return (
        <Card className="shadow-sm border-border/50 sticky top-24 overflow-hidden">
            {/* Store Cover Photo Area */}
            <div 
                className="h-28 w-full bg-muted bg-cover bg-center" 
                style={{ backgroundImage: coverUrl ? `url(${coverUrl})` : 'linear-gradient(to right, #0f172a, #334155)' }}
            ></div>

            <CardContent className="p-6 pt-0">
                {/* Store Avatar Overlapping the Cover */}
                <div className="flex justify-start -mt-10 mb-4">
                    <div className="w-20 h-20 bg-white rounded-2xl border-4 border-card shadow-sm flex items-center justify-center overflow-hidden shrink-0">
                        {avatarUrl ? (
                            <img src={avatarUrl} className="w-full h-full object-cover" alt={seller?.company_name || seller?.name} />
                        ) : (
                            <Building2 className="w-10 h-10 text-muted-foreground/30" />
                        )}
                    </div>
                </div>
                
                <div className="mb-4 border-b pb-4">
                    <h3 className="font-bold text-lg leading-tight truncate" title={seller?.company_name || seller?.name}>
                        {seller?.company_name || seller?.name || t('Verified Supplier')}
                    </h3>
                    
                    {/* UPDATED: Only show the country line if the country name exists */}
                    {seller?.country?.name && (
                        <p className="text-xs text-muted-foreground mt-1 flex items-center gap-1.5">
                            <Store className="w-3.5 h-3.5" /> {seller.country.name}
                        </p>
                    )}
                </div>
                
                <div className="space-y-3 mb-6 text-sm">
                    <div className="flex justify-between items-center">
                        <span className="text-muted-foreground">{t('Store Rating')}</span>
                        <span className="font-medium text-amber-500 flex items-center gap-1">
                            <Star className="w-3.5 h-3.5 fill-amber-500" /> 
                            {avgRating > 0 ? avgRating : t('New')}
                        </span>
                    </div>
                    <div className="flex justify-between items-center">
                        <span className="text-muted-foreground">{t('Response Time')}</span>
                        <span className="font-medium">{responseTime}</span>
                    </div>

                    {isOwner && (
                        <div className="flex justify-between items-center animate-in fade-in">
                            <span className="text-muted-foreground">{t('Store Views')}</span>
                            <span className="font-bold text-primary">{storeViews}</span>
                        </div>
                    )}
                </div>

                <div className="space-y-2">
                    {!isOwner && (
                        <Button 
                            variant="outline" 
                            className="w-full gap-2 rounded-lg font-bold border-primary/30 text-primary hover:bg-primary/5"
                            onClick={() => setIsContactOpen(true)}
                        >
                            <MessageSquare className="w-4 h-4" /> {t('Contact Supplier')}
                        </Button>
                    )}

                    <Button 
                        variant={isOwner ? "outline" : "secondary"} 
                        className={`w-full gap-2 rounded-lg font-bold ${!isOwner ? 'bg-muted hover:bg-muted/80' : ''}`} 
                        asChild
                    >
                        <Link href={route('store.view', seller?.store_slug || seller?.username || '')}>
                            <Store className="w-4 h-4" /> {t('Visit Store')}
                        </Link>
                    </Button>
                </div>
            </CardContent>
        </Card>
    );
}