import LandlordLayout from "@/Layouts/LandlordLayout";
import { useForm, Link } from "@inertiajs/react";
import { FormEvent } from "react";

interface Tenant {
    id: string;
    name: string;
    email: string | null;
    is_active: boolean;
}

interface Props {
    tenant: Tenant;
}

export default function TenantEdit({ tenant }: Props) {
    const { data, setData, put, processing, errors } = useForm({
        name: tenant.name,
        email: tenant.email || "",
        is_active: tenant.is_active,
    });

    const handleSubmit = (e: FormEvent) => {
        e.preventDefault();
        put(route("landlord.tenants.update", tenant.id));
    };

    return (
        <LandlordLayout
            title="編輯客戶"
        >
            <div className="max-w-2xl">
                <div className="mb-6">
                    <h1 className="text-2xl font-bold text-slate-900">編輯客戶</h1>
                    <p className="text-slate-500 mt-1">修改客戶 {tenant.id} 的資訊</p>
                </div>

                <form onSubmit={handleSubmit} className="bg-white rounded-xl border border-slate-200 p-6 space-y-6">
                    <div>
                        <label className="block text-sm font-medium text-slate-700 mb-2">
                            客戶 ID
                        </label>
                        <input
                            type="text"
                            value={tenant.id}
                            disabled
                            className="w-full px-4 py-2 border border-slate-200 rounded-lg bg-slate-50 text-slate-500"
                        />
                        <p className="mt-1 text-sm text-slate-500">客戶 ID 無法修改</p>
                    </div>

                    <div>
                        <label className="block text-sm font-medium text-slate-700 mb-2">
                            客戶名稱 <span className="text-red-500">*</span>
                        </label>
                        <input
                            type="text"
                            value={data.name}
                            onChange={(e) => setData("name", e.target.value)}
                            className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-main focus:border-primary-main"
                        />
                        {errors.name && <p className="mt-1 text-sm text-red-500">{errors.name}</p>}
                    </div>

                    <div>
                        <label className="block text-sm font-medium text-slate-700 mb-2">
                            聯絡信箱
                        </label>
                        <input
                            type="email"
                            value={data.email}
                            onChange={(e) => setData("email", e.target.value)}
                            className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-main focus:border-primary-main"
                        />
                        {errors.email && <p className="mt-1 text-sm text-red-500">{errors.email}</p>}
                    </div>

                    <div>
                        <label className="flex items-center gap-2">
                            <input
                                type="checkbox"
                                checked={data.is_active}
                                onChange={(e) => setData("is_active", e.target.checked)}
                                className="w-4 h-4 rounded border-slate-300 text-primary-main focus:ring-primary-main"
                            />
                            <span className="text-sm font-medium text-slate-700">啟用此客戶</span>
                        </label>
                    </div>

                    <div className="flex items-center gap-4 pt-4 border-t">
                        <button
                            type="submit"
                            disabled={processing}
                            className="bg-primary-main hover:bg-primary-dark text-white px-6 py-2 rounded-lg disabled:opacity-50 transition-colors"
                        >
                            {processing ? "儲存中..." : "儲存變更"}
                        </button>
                        <Link
                            href="/landlord/tenants"
                            className="text-slate-600 hover:text-slate-900"
                        >
                            取消
                        </Link>
                    </div>
                </form>
            </div>
        </LandlordLayout>
    );
}