import LandlordLayout from "@/Layouts/LandlordLayout";
import { Link, router } from "@inertiajs/react";
import { Plus, Edit, Trash2, Globe } from "lucide-react";
import { useState } from "react";
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
} from "@/Components/ui/alert-dialog";

interface Tenant {
    id: string;
    name: string;
    email: string | null;
    is_active: boolean;
    created_at: string;
    domains: string[];
}

interface Props {
    tenants: Tenant[];
}

export default function TenantIndex({ tenants }: Props) {
    const [deleteTarget, setDeleteTarget] = useState<Tenant | null>(null);

    const handleDelete = () => {
        if (deleteTarget) {
            router.delete(route("landlord.tenants.destroy", deleteTarget.id));
            setDeleteTarget(null);
        }
    };

    return (
        <LandlordLayout
            title="客戶管理"
        >
            <div className="space-y-6">
                {/* Header */}
                <div className="flex items-center justify-between">
                    <div>
                        <h1 className="text-2xl font-bold text-slate-900">客戶管理</h1>
                        <p className="text-slate-500 mt-1">管理系統中的所有客戶</p>
                    </div>
                    <Link
                        href="/landlord/tenants/create"
                        className="bg-primary-main hover:bg-primary-dark text-white px-4 py-2 rounded-lg flex items-center gap-2 transition-colors"
                    >
                        <Plus className="w-4 h-4" />
                        新增客戶
                    </Link>
                </div>

                {/* Table */}
                <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
                    <table className="w-full">
                        <thead className="bg-slate-50">
                            <tr>
                                <th className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase">
                                    ID
                                </th>
                                <th className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase">
                                    名稱
                                </th>
                                <th className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase">
                                    域名
                                </th>
                                <th className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase">
                                    狀態
                                </th>
                                <th className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase">
                                    建立時間
                                </th>
                                <th className="px-6 py-3 text-right text-xs font-semibold text-slate-500 uppercase">
                                    操作
                                </th>
                            </tr>
                        </thead>
                        <tbody className="divide-y divide-slate-100">
                            {tenants.length === 0 ? (
                                <tr>
                                    <td colSpan={6} className="px-6 py-12 text-center text-slate-500">
                                        尚無客戶資料，請點擊「新增客戶」建立第一個客戶
                                    </td>
                                </tr>
                            ) : (
                                tenants.map((tenant) => (
                                    <tr key={tenant.id} className="hover:bg-slate-50">
                                        <td className="px-6 py-4 font-mono text-sm text-slate-600">
                                            {tenant.id}
                                        </td>
                                        <td className="px-6 py-4">
                                            <div>
                                                <p className="font-medium text-slate-900">{tenant.name}</p>
                                                {tenant.email && (
                                                    <p className="text-sm text-slate-500">{tenant.email}</p>
                                                )}
                                            </div>
                                        </td>
                                        <td className="px-6 py-4">
                                            {tenant.domains.length > 0 ? (
                                                <div className="flex items-center gap-1 flex-wrap">
                                                    {tenant.domains.map((domain) => (
                                                        <span
                                                            key={domain}
                                                            className="inline-flex items-center gap-1 px-2 py-1 bg-slate-100 rounded text-xs"
                                                        >
                                                            <Globe className="w-3 h-3" />
                                                            {domain}
                                                        </span>
                                                    ))}
                                                </div>
                                            ) : (
                                                <span className="text-slate-400 text-sm">無</span>
                                            )}
                                        </td>
                                        <td className="px-6 py-4">
                                            <span
                                                className={`px-2 py-1 rounded-full text-xs font-medium ${tenant.is_active
                                                    ? "bg-green-100 text-green-700"
                                                    : "bg-slate-100 text-slate-600"
                                                    }`}
                                            >
                                                {tenant.is_active ? "啟用" : "停用"}
                                            </span>
                                        </td>
                                        <td className="px-6 py-4 text-sm text-slate-500">
                                            {tenant.created_at}
                                        </td>
                                        <td className="px-6 py-4 text-right">
                                            <div className="flex items-center justify-end gap-2">
                                                <Link
                                                    href={`/landlord/tenants/${tenant.id}`}
                                                    className="p-2 text-slate-400 hover:text-primary-main hover:bg-slate-100 rounded-lg transition-colors"
                                                    title="查看詳情"
                                                >
                                                    <Globe className="w-4 h-4" />
                                                </Link>
                                                <Link
                                                    href={`/landlord/tenants/${tenant.id}/edit`}
                                                    className="p-2 text-slate-400 hover:text-blue-600 hover:bg-slate-100 rounded-lg transition-colors"
                                                    title="編輯"
                                                >
                                                    <Edit className="w-4 h-4" />
                                                </Link>
                                                <button
                                                    onClick={() => setDeleteTarget(tenant)}
                                                    className="p-2 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
                                                    title="刪除"
                                                >
                                                    <Trash2 className="w-4 h-4" />
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                ))
                            )}
                        </tbody>
                    </table>
                </div>
            </div>

            {/* Delete Confirmation */}
            <AlertDialog open={!!deleteTarget} onOpenChange={() => setDeleteTarget(null)}>
                <AlertDialogContent>
                    <AlertDialogHeader>
                        <AlertDialogTitle>確定要刪除這個客戶嗎？</AlertDialogTitle>
                        <AlertDialogDescription>
                            刪除客戶將會同時刪除其資料庫和所有資料，此操作無法復原。
                        </AlertDialogDescription>
                    </AlertDialogHeader>
                    <AlertDialogFooter>
                        <AlertDialogCancel>取消</AlertDialogCancel>
                        <AlertDialogAction
                            onClick={handleDelete}
                            className="bg-red-600 hover:bg-red-700"
                        >
                            確定刪除
                        </AlertDialogAction>
                    </AlertDialogFooter>
                </AlertDialogContent>
            </AlertDialog>
        </LandlordLayout>
    );
}