import SearchOutlined from "@mui/icons-material/SearchOutlined";
import TextField from "@mui/material/TextField";
import { Button } from "@/shared/ui/Button.jsx";
import {
    AdminFormDialog,
    AdminFormFieldGrid,
    AdminFormSection,
} from "@/shared/ui/AdminFormDialog.jsx";
import { AdminUserIdentity } from "@/shared/ui/AdminUserIdentity.jsx";
import styles from "@/features/external-admin-users/external-admin-users.module.css";
import { ExternalAdminPermissionSelector } from "@/features/external-admin-users/components/ExternalAdminPermissionSelector.jsx";

export function ExternalAdminUserFormDialog({
    abilities,
    catalog,
    catalogError,
    catalogLoading,
    form,
    loading,
    lookupLoading,
    onClose,
    onDisplayUserIdChange,
    onFormChange,
    onLookup,
    onReloadCatalog,
    onSubmit,
    open,
    targetUser,
}) {
    const existingAccount = targetUser?.existingExternalAdminUser;

    return (
        <AdminFormDialog
            disabled={!abilities.canCreate}
            loading={loading}
            open={open}
            size="large"
            submitDisabled={
                !abilities.canCreate ||
                loading ||
                !targetUser?.userId ||
                Boolean(existingAccount) ||
                (abilities.canManagePermissions &&
                    (catalogLoading || Boolean(catalogError) || !catalog.length))
            }
            submitLabel="创建"
            title="创建外管用户"
            onClose={onClose}
            onSubmit={onSubmit}
        >
            <AdminFormSection title="绑定 App 用户">
                <div className={styles.lookupRow}>
                    <TextField
                        autoComplete="off"
                        disabled={!abilities.canCreate || loading}
                        label="用户短 ID / 靓号"
                        required
                        value={form.displayUserId}
                        onChange={(event) => onDisplayUserIdChange(event.target.value)}
                        onKeyDown={(event) => {
                            if (event.key === "Enter") {
                                event.preventDefault();
                                onLookup();
                            }
                        }}
                    />
                    <Button
                        className={styles.lookupButton}
                        disabled={!abilities.canCreate || loading || lookupLoading}
                        startIcon={<SearchOutlined fontSize="small" />}
                        onClick={onLookup}
                    >
                        {lookupLoading ? "搜索中" : "搜索"}
                    </Button>
                </div>
                {targetUser ? (
                    <div className={styles.targetPanel}>
                        <AdminUserIdentity
                            openInAppUserDetail
                            rows={[targetUser.displayUserId, targetUser.userId]}
                            size="large"
                            user={targetUser}
                        />
                        {existingAccount ? (
                            <div className={styles.existingWarning}>
                                该用户已绑定外管账号 {existingAccount.username || existingAccount.id}，不能重复创建。
                            </div>
                        ) : null}
                    </div>
                ) : null}
            </AdminFormSection>

            <AdminFormSection title="外管登录账号">
                <AdminFormFieldGrid columns="repeat(2, minmax(0, 1fr))">
                    <TextField
                        autoComplete="off"
                        disabled={!abilities.canCreate || loading}
                        label="外管账号"
                        required
                        value={form.username}
                        onChange={(event) => onFormChange({ username: event.target.value })}
                    />
                    <TextField
                        autoComplete="new-password"
                        disabled={!abilities.canCreate || loading}
                        label="密码"
                        required
                        type="password"
                        value={form.password}
                        onChange={(event) => onFormChange({ password: event.target.value })}
                    />
                    <TextField
                        autoComplete="new-password"
                        disabled={!abilities.canCreate || loading}
                        label="确认密码"
                        required
                        type="password"
                        value={form.confirmPassword}
                        onChange={(event) => onFormChange({ confirmPassword: event.target.value })}
                    />
                </AdminFormFieldGrid>
            </AdminFormSection>

            {abilities.canManagePermissions ? (
                <AdminFormSection title="外管权限">
                    <ExternalAdminPermissionSelector
                        catalog={catalog}
                        disabled={loading}
                        error={catalogError}
                        loading={catalogLoading}
                        value={form.permissions || []}
                        onChange={(permissions) => onFormChange({ permissions })}
                        onRetry={onReloadCatalog}
                    />
                </AdminFormSection>
            ) : null}
        </AdminFormDialog>
    );
}