'use client'

import { IconEye, IconTelegram, IconClock, IconLink, IconRefresh } from '@/app/ui/icons/icons';
import { useState } from 'react';
export default function CasesList() {
	const [currentTab, setCurrentTab] = useState('available-cases');
	/* available-cases, my-cases */

	return (
		<div className="cases-list-wrapper">
			<div className="bg-white rounded-xl shadow-lg mb-8">
				<div className="border-b border-gray-200 px-6">
					<div className="flex space-x-8">
						<button
							className={`cases-list-tab ${currentTab === 'available-cases' ? 'tab-active' : ''}`}
							onClick={() => {
								setCurrentTab('available-cases')
							}}
						>
							Доступные дела
						</button>
						<button
							className={`cases-list-tab ${currentTab === 'my-cases' ? 'tab-active' : ''}`}
							onClick={() => {
								setCurrentTab('my-cases')
							}}
						>
							Мои дела
							<span className="ml-2 bg-blue-100 text-blue-600 px-2 py-1 rounded-full text-xs font-bold">
								0
							</span>
						</button>
					</div>
				</div>
			</div>

			<div className="cases-list-update-wrapper">
				<button className="cases-list-update-button">
					<i className="fas fa-sync-alt mr-2">
						<IconRefresh />
					</i>
					Показать все дела (0)
				</button>
			</div>


			{currentTab == "available-cases" && (
				<div id="available-cases">

					<div className="cases-item">
						<div className="p-6">
							<div className="flex items-start justify-between mb-4">
								<div className="flex-1">
									<div className="flex items-center space-x-3 mb-2">
										<span className="priority-badge priority-medium">Средний</span>
										<span className="status-badge status-submitted">Подано</span>
										<span className="text-xs text-gray-500">#ARB-2025-000271</span>
									</div>
									<h3 className="text-xl font-bold text-gray-800 mb-2">
										Дело №ARB-2025-000271</h3>
									<p className="text-gray-600 text-sm mb-3">
										Нет описания</p>
								</div>
							</div>

							<div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-4">
								<div>
									<p className="text-xs text-gray-500 mb-1">Клиент</p>
									<p className="text-sm font-semibold">Info</p>
								</div>
								<div>
									<p className="text-xs text-gray-500 mb-1">Ущерб</p>
									<p className="text-sm font-bold text-green-600">₽0</p>
								</div>
								<div>
									<p className="text-xs text-gray-500 mb-1">Часы</p>
									<p className="text-sm font-bold text-blue-600">0 ч</p>
								</div>
								<div>
									<p className="text-xs text-gray-500 mb-1">Тип</p>
									<p className="text-sm font-semibold">N/A</p>
								</div>
								<div>
									<p className="text-xs text-gray-500 mb-1">Создано</p>
									<p className="text-sm font-semibold">12.10.2025</p>
								</div>
							</div>

							<div className="flex items-center justify-between pt-4 border-t border-gray-200">
								<div className="flex items-center space-x-4">
									<a href="https://ok.ru/video/1148977353049" target="_blank" className="cases-item-link">
										<i className="fas fa-link mr-1">
											<IconLink />
										</i>
										<span>
											Ссылка
										</span>
									</a>
									<span className="cases-item-date-ago">
										<i className="fas fa-clock mr-1">
											<IconClock />
										</i>
										<span>
											95 дней назад
										</span>
									</span>
								</div>
								<div className="flex space-x-2">
									<a href="?lawyer_id=1&amp;case_id=8" className="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition font-semibold flex">
										<i className="fas fa-eye mr-2">
											<IconEye />
										</i>
										<span>
											Подробнее
										</span>
									</a>
									<form method="POST">
										<input type="hidden" name="assign_case" value="1" />
										<input type="hidden" name="case_id" value="8" />
										<button type="submit" className="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition font-semibold flex">
											<i className="fas fa-paper-plane mr-2">
												<IconTelegram />
											</i>
											<span>
												Взять
											</span>
										</button>
									</form>
								</div>
							</div>
						</div>
					</div>

				</div>
			)}

			{currentTab == "my-cases" && (
				<div id="my-cases">
					<div className="cases-item">
						<div className="p-6">
							<div className="flex items-start justify-between mb-4">
								<div className="flex-1">
									<div className="flex items-center space-x-3 mb-2">
										<span className="priority-badge priority-medium">Средний</span>
										<span className="status-badge status-assigned">Назначено</span>
										<span className="text-xs text-gray-500">#ARB-2025-000271</span>
									</div>
									<h3 className="text-xl font-bold text-gray-800 mb-2">
										Дело №ARB-2025-000271</h3>
									<p className="text-gray-600 text-sm mb-3">
										Нет описания</p>
								</div>
							</div>

							<div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-4">
								<div>
									<p className="text-xs text-gray-500 mb-1">Клиент</p>
									<p className="text-sm font-semibold">Info</p>
								</div>
								<div>
									<p className="text-xs text-gray-500 mb-1">Ущерб</p>
									<p className="text-sm font-bold text-green-600">₽0</p>
								</div>
								<div>
									<p className="text-xs text-gray-500 mb-1">Часы</p>
									<p className="text-sm font-bold text-blue-600">0 ч</p>
								</div>
								<div>
									<p className="text-xs text-gray-500 mb-1">Тип</p>
									<p className="text-sm font-semibold">N/A</p>
								</div>
								<div>
									<p className="text-xs text-gray-500 mb-1">Создано</p>
									<p className="text-sm font-semibold">12.10.2025</p>
								</div>
							</div>

							<div className="flex items-center justify-between pt-4 border-t border-gray-200">
								<div className="flex items-center space-x-4">
									<a href="https://ok.ru/video/1148977353049" target="_blank" className="cases-item-link">
										<i className="fas fa-link mr-1">
											<IconLink />
										</i>
										<span>
											Ссылка
										</span>
									</a>
									<span className="cases-item-date-ago">
										<i className="fas fa-clock mr-1">
											<IconClock />
										</i>
										<span>
											95 дней назад
										</span>
									</span>
								</div>
								<div className="flex space-x-2">
									<a href="?lawyer_id=1&amp;case_id=8" className="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition font-semibold flex">
										<i className="fas fa-eye mr-2">
											<IconEye />
										</i>
										<span>
											Подробнее
										</span>
									</a>
									<form method="POST">
										<input type="hidden" name="assign_case" value="1" />
										<input type="hidden" name="case_id" value="8" />
										<button type="submit" className="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition font-semibold flex">
											<i className="fas fa-paper-plane mr-2">
												<IconTelegram />
											</i>
											<span>
												Взять
											</span>
										</button>
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
			)}
		</div>
	)
}