"use client";

import { useState } from "react";
import Button from "@/components/ui/Button";

export default function FileItem({ file, onDelete, onUpdate }) {
	const [isEditing, setIsEditing] = useState(false);
	const [editFilename, setEditFilename] = useState(file.original_filename);
	const [editDescription, setEditDescription] = useState(file.description || "");

	const handleSave = async () => {
		try {
			const res = await fetch(`/api/files/${file.file_id}`, {
				method: 'PUT',
				headers: {
					'Content-Type': 'application/json',
				},
				body: JSON.stringify({
					original_filename: editFilename,
					description: editDescription,
				}),
			});
			if (res.ok) {
				const updatedFile = await res.json();
				onUpdate(updatedFile);
				setIsEditing(false);
			} else {
				alert('Błąd podczas aktualizacji pliku');
			}
		} catch (error) {
			console.error('Error updating file:', error);
			alert('Błąd podczas aktualizacji pliku');
		}
	};

	const handleCancel = () => {
		setEditFilename(file.original_filename);
		setEditDescription(file.description || "");
		setIsEditing(false);
	};

	const formatFileSize = (bytes) => {
		if (!bytes) return '';
		if (bytes === 0) return '0 Bytes';
		const k = 1024;
		const sizes = ['Bytes', 'KB', 'MB', 'GB'];
		const i = Math.floor(Math.log(bytes) / Math.log(k));
		return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
	};

	const getFileIcon = (filename) => {
		const ext = filename.split('.').pop().toLowerCase();
		if (['jpg', 'jpeg', 'png', 'gif'].includes(ext)) {
			return (
				<svg className="w-4 h-4 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
					<path fillRule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clipRule="evenodd" />
				</svg>
			);
		} else if (ext === 'pdf') {
			return (
				<svg className="w-4 h-4 text-red-500" fill="currentColor" viewBox="0 0 20 20">
					<path fillRule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clipRule="evenodd" />
				</svg>
			);
		} else if (['doc', 'docx'].includes(ext)) {
			return (
				<svg className="w-4 h-4 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
					<path fillRule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clipRule="evenodd" />
				</svg>
			);
		} else if (['xls', 'xlsx'].includes(ext)) {
			return (
				<svg className="w-4 h-4 text-green-600" fill="currentColor" viewBox="0 0 20 20">
					<path fillRule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clipRule="evenodd" />
				</svg>
			);
		} else {
			return (
				<svg className="w-4 h-4 text-gray-500" fill="currentColor" viewBox="0 0 20 20">
					<path fillRule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clipRule="evenodd" />
				</svg>
			);
		}
	};

	if (isEditing) {
		return (
			<div className="p-3 bg-gray-50 rounded-lg border">
				<div className="space-y-3">
					<div>
						<label className="block text-xs font-medium text-gray-700 mb-1">
							Nazwa pliku
						</label>
						<input
							type="text"
							value={editFilename}
							onChange={(e) => setEditFilename(e.target.value)}
							className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
						/>
					</div>
					<div>
						<label className="block text-xs font-medium text-gray-700 mb-1">
							Opis (opcjonalny)
						</label>
						<input
							type="text"
							value={editDescription}
							onChange={(e) => setEditDescription(e.target.value)}
							className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
							placeholder="Dodaj opis pliku..."
						/>
					</div>
					<div className="flex gap-2">
						<Button size="sm" onClick={handleSave}>
							Zapisz
						</Button>
						<Button size="sm" variant="outline" onClick={handleCancel}>
							Anuluj
						</Button>
					</div>
				</div>
			</div>
		);
	}

	return (
		<div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors group">
			<div className="flex items-center flex-1 min-w-0">
				<div className="flex-shrink-0 mr-3">
					{getFileIcon(file.original_filename)}
				</div>
				<div className="min-w-0 flex-1">
					<div className="text-sm font-medium text-gray-900 truncate">
						{file.original_filename}
					</div>
					<div className="text-xs text-gray-500 flex items-center gap-2">
						<span>{formatFileSize(file.file_size)}</span>
						<span>•</span>
						<span>{new Date(file.upload_date).toLocaleDateString('pl-PL')}</span>
					</div>
					{file.description && (
						<div className="text-xs text-gray-600 mt-1 truncate">
							{file.description}
						</div>
					)}
				</div>
			</div>
			<div className="flex items-center gap-1 ml-3">
				<a
					href={`/api/files/${file.file_id}`}
					target="_blank"
					rel="noopener noreferrer"
					className="text-blue-600 hover:text-blue-800 p-1 rounded"
					title="Pobierz"
				>
					<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
					</svg>
				</a>
				<button
					onClick={() => setIsEditing(true)}
					className="text-gray-600 hover:text-gray-800 p-1 rounded opacity-0 group-hover:opacity-100 transition-opacity"
					title="Edytuj"
				>
					<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
					</svg>
				</button>
				<button
					onClick={() => onDelete(file.file_id)}
					className="text-red-600 hover:text-red-800 p-1 rounded opacity-0 group-hover:opacity-100 transition-opacity"
					title="Usuń"
				>
					<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
					</svg>
				</button>
			</div>
		</div>
	);
}