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

export default function TenantCreate() {
    const { data, setData, post, processing, errors } = useForm({
        id: "",
        name: "",
        short_name: "",
        email: "",
        domain: "",
    });

    const handleSubmit = (e: FormEvent) => {
        e.preventDefault();
        post(route("landlord.tenants.store"));
    };

    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">建立一個新的客戶帳號</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 <span className="text-red-500">*</span>
                        </label>
                        <input
                            type="text"
                            value={data.id}
                            onChange={(e) => setData("id", e.target.value.toLowerCase())}
                            placeholder="例如：koori, alcohol"
                            className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-main focus:border-primary-main"
                        />
                        <p className="mt-1 text-sm text-slate-500">只能使用英文、數字、底線</p>
                        {errors.id && <p className="mt-1 text-sm text-red-500">{errors.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)}
                            placeholder="例如：小小冰室"
                            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="text"
                            value={data.short_name}
                            onChange={(e) => setData("short_name", e.target.value)}
                            placeholder="例如：小冰"
                            className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-main focus:border-primary-main"
                        />
                        <p className="mt-1 text-sm text-slate-500">選填</p>
                        {errors.short_name && <p className="mt-1 text-sm text-red-500">{errors.short_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)}
                            placeholder="admin@example.com"
                            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="block text-sm font-medium text-slate-700 mb-2">
                            綁定域名
                        </label>
                        <input
                            type="text"
                            value={data.domain}
                            onChange={(e) => setData("domain", e.target.value)}
                            placeholder="例如：koori.erp.koori.tw"
                            className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-main focus:border-primary-main"
                        />
                        <p className="mt-1 text-sm text-slate-500">可之後再設定</p>
                        {errors.domain && <p className="mt-1 text-sm text-red-500">{errors.domain}</p>}
                    </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>
    );
}