/**

* @license

* SPDX-License-Identifier: Apache-2.0

*/

import React, { useState, useMemo } from 'react';

import { motion, AnimatePresence } from 'framer-motion';

import { WardrobeItem, Product, FlatLayProduct, FeatureSpotlight, CampaignMedia, Gender, GarmentCategory } from '../types';

import type { AppAction } from '../state/appReducer';

import { CloudUploadIcon, PencilIcon, Trash2Icon, HangerIcon, DownloadIcon, FileUpIcon } from './icons';

import FilterBar from './FilterBar';

import TabButton from './TabButton';

interface WardrobeStudioProps {

wardrobe: WardrobeItem[];

products: Product[];

flatLayLibrary: FlatLayProduct[];

featureSpotlightLibrary: { [garmentId: string]: FeatureSpotlight[] };

campaignMediaHistory: CampaignMedia[];

activeWardrobeItemId: string | null;

dispatch: React.Dispatch<AppAction>;

onDownloadImage: (url: string, filename: string) => void;

}

const GENDERS: readonly (Gender | 'All')[] = ['All', 'Unisex', 'Male', 'Female'];

const CATEGORIES: readonly (GarmentCategory | 'All')[] = ['All', 'Top', 'Bottom', 'Outerwear', 'Full-Body', 'Accessory', 'Footwear'];

const WardrobeItemCard: React.FC<{

item: WardrobeItem,

isActive: boolean,

onSelect: () => void,

onEdit: () => void,

onDelete: () => void,

onDownload: () => void,

}> = ({ item, isActive, onSelect, onEdit, onDelete, onDownload }) => {

const [isConfirmingDelete, setIsConfirmingDelete] = useState(false);

const handleDeleteClick = (e: React.MouseEvent) => {

e.stopPropagation(); // Prevent onSelect from firing

setIsConfirmingDelete(true);

};

const handleConfirmDelete = (e: React.MouseEvent) => {

e.stopPropagation();

onDelete();

}

const handleCancelDelete = (e: React.MouseEvent) => {

e.stopPropagation();

setIsConfirmingDelete(false);

}

return (

<div className="relative group aspect-square">

<button

onClick={onSelect}

className={`aspect-square border-2 rounded-lg overflow-hidden transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent w-full ${isActive ? 'border-accent' : 'border-borderLight hover:border-gray-400'}`}

>

<img src={item.variants[0].views.front} alt={item.name} className="w-full h-full object-cover bg-gray-100" />

</button>

<div className="absolute top-1.5 right-1.5 flex flex-col gap-1.5 opacity-0 group-hover:opacity-100 transition-opacity">

<button onClick={(e) => { e.stopPropagation(); onDownload(); }} className="bg-black/50 text-white rounded-full p-1.5 backdrop-blur-sm hover:bg-accent" title="Download Source Image">

<DownloadIcon className="w-3 h-3" />

</button>

<button onClick={(e) => { e.stopPropagation(); onEdit(); }} className="bg-black/50 text-white rounded-full p-1.5 backdrop-blur-sm hover:bg-accent" title="Edit Garment">

<PencilIcon className="w-3 h-3" />

</button>

<button onClick={handleDeleteClick} className="bg-black/50 text-white rounded-full p-1.5 backdrop-blur-sm hover:bg-destructive" title="Delete Garment">

<Trash2Icon className="w-3 h-3" />

</button>

</div>

<p className="text-xs font-semibold text-center mt-1 truncate">{item.name}</p>

<AnimatePresence>

{isConfirmingDelete && (

<motion.div

initial={{ opacity: 0 }}

animate={{ opacity: 1 }}

exit={{ opacity: 0 }}

className="absolute inset-0 bg-white/80 backdrop-blur-sm rounded-lg flex flex-col items-center justify-center p-2 z-10"

>

<p className="text-xs font-semibold text-center">Delete item?</p>

<div className="flex gap-2 mt-2">

<button onClick={handleConfirmDelete} className="text-xs font-bold text-white bg-destructive px-3 py-1 rounded-md hover:bg-destructive/80">Yes</button>

<button onClick={handleCancelDelete} className="text-xs font-semibold text-textSecondary hover:underline">No</button>

</div>

</motion.div>

)}

</AnimatePresence>

</div>

);

};

const ImageGrid: React.FC<{ images: string[], emptyMessage: string }> = ({ images, emptyMessage }) => {

if (images.length === 0) {

return <p className="text-sm text-textSecondary text-center py-4">{emptyMessage}</p>;

}

return (

<div className="grid grid-cols-3 gap-2">

{images.map((img, index) => (

<div key={index} className="aspect-square bg-gray-100 rounded-md overflow-hidden border">

<img src={img} alt={`Usage example ${index + 1}`} className="w-full h-full object-cover" />

</div>

))}

</div>

);

};

const GarmentDetailView: React.FC<Omit<WardrobeStudioProps, 'activeWardrobeItemId' | 'dispatch'> & { garment: WardrobeItem, dispatch: React.Dispatch<AppAction> }> = ({ garment, products, flatLayLibrary, featureSpotlightLibrary, campaignMediaHistory, dispatch }) => {

const [isConfirmingDelete, setIsConfirmingDelete] = useState(false);

const [activeUsageTab, setActiveUsageTab] = useState<'Fitting Room' | 'Product Studio' | 'Campaign Studio'>('Fitting Room');

const usages = useMemo(() => {

const productImages = (products || [])

.filter(p => p.garments.some(g => g.garmentId === garment.id))

.flatMap(p => p.variations.map(v => v.imageUrl));

const productStudioImages = [

...(flatLayLibrary || []).filter(fl => fl.garmentId === garment.id).map(fl => fl.imageUrl),

...(featureSpotlightLibrary[garment.id] || []).map(ds => ds.imageUrl)

];

const campaignImages = (campaignMediaHistory || [])

.filter(cm => cm.usedGarmentIds?.includes(garment.id) && cm.type === 'image')

.map(cm => cm.url);

return { productImages, productStudioImages, campaignImages };

}, [garment.id, products, flatLayLibrary, featureSpotlightLibrary, campaignMediaHistory]);

const handleDelete = () => {

dispatch({ type: 'DELETE_GARMENT', payload: { garmentId: garment.id } });

setIsConfirmingDelete(false);

};

return (

<motion.div

initial={{ opacity: 0, x: 10 }}

animate={{ opacity: 1, x: 0 }}

exit={{ opacity: 0, x: 10 }}

className="p-6 space-y-6"

>

<div className="flex items-start gap-4">

<img src={garment.variants[0].views.front} alt={garment.name} className="w-32 h-32 object-contain rounded-lg border bg-gray-50" />

<div>

<h3 className="text-2xl font-serif">{garment.name}</h3>

<p className="text-sm text-textSecondary">{garment.category} / {garment.gender}</p>

<div className="mt-4 flex items-center gap-2">

<button onClick={() => dispatch({ type: 'EDIT_GARMENT', payload: garment.id })} className="flex items-center gap-1.5 text-sm font-semibold text-accent hover:text-accentHover p-2 rounded-md hover:bg-accent/10">

<PencilIcon className="w-4 h-4" /> Edit Details

</button>

<AnimatePresence mode="wait">

{isConfirmingDelete ? (

<motion.div

key="confirm"

initial={{ opacity: 0, x: -10 }}

animate={{ opacity: 1, x: 0 }}

exit={{ opacity: 0, x: -10 }}

className="flex items-center gap-2"

>

<p className="text-sm font-semibold text-destructive">Are you sure?</p>

<button onClick={handleDelete} className="text-xs font-bold text-white bg-destructive px-2 py-1 rounded-md hover:bg-destructive/80">Yes, Delete</button>

<button onClick={() => setIsConfirmingDelete(false)} className="text-xs font-semibold text-textSecondary hover:underline">Cancel</button>

</motion.div>

) : (

<motion.button

key="delete"

initial={{ opacity: 0, x: 10 }}

animate={{ opacity: 1, x: 0 }}

exit={{ opacity: 0, x: 10 }}

onClick={() => setIsConfirmingDelete(true)}

className="flex items-center gap-1.5 text-sm font-semibold text-textSecondary hover:text-red-500 p-2 rounded-md hover:bg-red-50"

>

<Trash2Icon className="w-4 h-4" /> Delete

</motion.button>

)}

</AnimatePresence>

</div>

</div>

</div>

<div>

<h4 className="font-semibold text-lg font-serif border-b pb-1 mb-3">Colorways</h4>

<div className="flex flex-wrap gap-2">

{garment.variants.map(v => (

<div key={v.id} className="flex flex-col items-center">

<img src={v.views.front} alt={v.colorName} className="w-16 h-16 object-cover rounded-md border" />

<p className="text-xs mt-1 text-textSecondary">{v.colorName}</p>

</div>

))}

</div>

</div>

<div>

<h4 className="font-semibold text-lg font-serif border-b pb-1 mb-3">Used In Looks</h4>

<div className="border-b border-border">

<div className="flex items-center gap-2">

<TabButton label={`Fitting Room (${usages.productImages.length})`} isActive={activeUsageTab === 'Fitting Room'} onClick={() => setActiveUsageTab('Fitting Room')} />

<TabButton label={`Product (${usages.productStudioImages.length})`} isActive={activeUsageTab === 'Product Studio'} onClick={() => setActiveUsageTab('Product Studio')} />

<TabButton label={`Campaign (${usages.campaignImages.length})`} isActive={activeUsageTab === 'Campaign Studio'} onClick={() => setActiveUsageTab('Campaign Studio')} />

</div>

</div>

<div className="pt-4 max-h-64 overflow-y-auto">

<AnimatePresence mode="wait">

<motion.div

key={activeUsageTab}

initial={{ opacity: 0, y: 10 }}

animate={{ opacity: 1, y: 0 }}

exit={{ opacity: 0, y: -10 }}

>

{activeUsageTab === 'Fitting Room' && (

<ImageGrid images={usages.productImages.map((url, i) => ({url, id: `fr-${i}`}))} emptyMessage="Not used in any Fitting Room products." />

)}

{activeUsageTab === 'Product Studio' && (

<ImageGrid images={usages.productStudioImages.map((url, i) => ({url, id: `ps-${i}`}))} emptyMessage="Not used in any Product Studio content." />

)}

{activeUsageTab === 'Campaign Studio' && (

<ImageGrid images={usages.campaignImages.map((url, i) => ({url, id: `cs-${i}`}))} emptyMessage="Not used in any Campaign images." />

)}

</motion.div>

</AnimatePresence>

</div>

</div>

</motion.div>

);

};

const WardrobeStudio: React.FC<WardrobeStudioProps> = (props) => {

const { wardrobe, dispatch, activeWardrobeItemId, onDownloadImage } = props;

const [searchText, setSearchText] = useState('');

const [genderFilter, setGenderFilter] = useState<Gender | 'All'>('All');

const [categoryFilter, setCategoryFilter] = useState<GarmentCategory | 'All'>('All');

const activeGarment = useMemo(() => wardrobe.find(item => item.id === activeWardrobeItemId), [wardrobe, activeWardrobeItemId]);

const handleClearFilters = () => {

setSearchText('');

setGenderFilter('All');

setCategoryFilter('All');

};

const handleDeleteGarment = (garmentId: string) => {

dispatch({ type: 'DELETE_GARMENT', payload: { garmentId } });

};

const filteredWardrobe = useMemo(() => {

const lowercasedSearch = searchText.toLowerCase();

return wardrobe.filter(item => {

const searchMatch = lowercasedSearch === '' || item.name.toLowerCase().includes(lowercasedSearch);

const genderMatch = genderFilter === 'All' || item.gender === genderFilter;

const categoryMatch = categoryFilter === 'All' || item.category === categoryFilter;

return searchMatch && genderMatch && categoryMatch;

});

}, [wardrobe, searchText, genderFilter, categoryFilter]);

return (

<div className="h-full flex flex-col bg-background">

<div className="flex-shrink-0 p-4 border-b border-borderLight flex items-center justify-between gap-2">

<h2 className="text-2xl font-serif tracking-wider text-textPrimary">Wardrobe Studio</h2>

<div className="flex items-center gap-2">

<button

onClick={() => dispatch({ type: 'TOGGLE_MODAL', payload: { modal: 'bulkImport', isOpen: true } })}

className="flex items-center gap-2 text-sm font-semibold p-2.5 bg-slate-100 text-textPrimary rounded-lg hover:bg-slate-200 border"

>

<FileUpIcon className="w-4 h-4"/> Bulk Import

</button>

<button

onClick={() => dispatch({ type: 'TOGGLE_MODAL', payload: { modal: 'addGarment', isOpen: true } })}

className="flex items-center gap-2 text-sm font-semibold p-2.5 bg-accent text-white rounded-lg hover:bg-accentHover"

>

<CloudUploadIcon className="w-4 h-4"/> Add New

</button>

</div>

</div>

<div className="flex-grow flex min-h-0">

<div className="w-1/2 lg:w-2/3 border-r border-borderLight flex flex-col">

<div className="flex-shrink-0 p-4 border-b border-borderLight">

<FilterBar

searchText={searchText}

onSearchChange={setSearchText}

genderFilter={genderFilter}

onGenderChange={setGenderFilter}

categoryFilter={categoryFilter}

onCategoryChange={setCategoryFilter}

onClearAll={handleClearFilters}

genderOptions={GENDERS}

categoryOptions={CATEGORIES}

/>

</div>

<div className="flex-grow p-4 overflow-y-auto">

<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">

{filteredWardrobe.map(item => (

<WardrobeItemCard

key={item.id}

item={item}

isActive={item.id === activeWardrobeItemId}

onSelect={() => dispatch({ type: 'SET_ACTIVE_WARDROBE_ITEM', payload: item.id })}

onEdit={() => dispatch({ type: 'EDIT_GARMENT', payload: item.id })}

onDelete={() => handleDeleteGarment(item.id)}

onDownload={() => onDownloadImage(item.variants[0].views.front, `${item.name}.png`)}

/>

))}

</div>

{filteredWardrobe.length === 0 && (

<div className="text-center py-10 text-textSecondary">

<p>No garments found.</p>

{searchText === '' && genderFilter === 'All' && categoryFilter === 'All' && (

<p className="text-xs mt-1">Click "Add New" to get started.</p>

)}

</div>

)}

</div>

</div>

<div className="w-1/2 lg:w-1/3 flex-grow overflow-y-auto">

{activeGarment ? (

<GarmentDetailView garment={activeGarment} {...props} />

) : (

<div className="h-full flex flex-col items-center justify-center text-center p-8 text-textSecondary">

<HangerIcon className="w-16 h-16 text-gray-300 mb-4" />

<p className="font-serif text-lg">Select an item</p>

<p className="text-sm">Select an item from your wardrobe to see its details and where it's been used.</p>

</div>

)}

</div>

</div>

</div>

);

};

export default WardrobeStudio;