"use client";

import { useCallback } from "react";
import { Button, Input, ErrorMessage } from "@/components/atoms";
import { FormField } from "@/components/molecules/FormField/FormField";
import { useWhmcsLink } from "@/features/auth/hooks";
import {
  linkWhmcsRequestSchema,
  type LinkWhmcsRequest,
  type LinkWhmcsResponse,
} from "@customer-portal/domain/auth";

type LinkWhmcsFormData = LinkWhmcsRequest;
import { useZodForm } from "@customer-portal/validation";

interface LinkWhmcsFormProps {
  onTransferred?: (result: LinkWhmcsResponse) => void;
  className?: string;
}

export function LinkWhmcsForm({ onTransferred, className = "" }: LinkWhmcsFormProps) {
  const { linkWhmcs, loading, error, clearError } = useWhmcsLink();

  const handleLink = useCallback(
    async (formData: LinkWhmcsFormData) => {
      clearError();
      const payload: LinkWhmcsRequest = {
        email: formData.email,
        password: formData.password,
      };
      const result = await linkWhmcs(payload);
      onTransferred?.(result);
    },
    [linkWhmcs, onTransferred, clearError]
  );

  const { values, errors, isSubmitting, setValue, handleSubmit } = useZodForm({
    schema: linkWhmcsRequestSchema,
    initialValues: {
      email: "",
      password: "",
    },
    onSubmit: handleLink,
  });

  return (
    <div className={`w-full max-w-md mx-auto ${className}`}>
      <div className="bg-white shadow-sm rounded-lg border border-gray-200 p-6">
        <div className="mb-6">
          <h2 className="text-lg font-semibold text-gray-900 mb-2">Link Your WHMCS Account</h2>
          <p className="text-sm text-gray-600">
            Enter your existing WHMCS credentials to link your account and migrate your data.
          </p>
        </div>

        <form onSubmit={event => void handleSubmit(event)} className="space-y-4">
          <FormField label="Email Address" error={errors.email} required>
            <Input
              type="email"
              value={values.email}
              onChange={e => setValue("email", e.target.value)}
              placeholder="Enter your WHMCS email"
              disabled={isSubmitting || loading}
              className="w-full"
            />
          </FormField>

          <FormField label="Password" error={errors.password} required>
            <Input
              type="password"
              value={values.password}
              onChange={e => setValue("password", e.target.value)}
              placeholder="Enter your WHMCS password"
              disabled={isSubmitting || loading}
              className="w-full"
            />
          </FormField>

          {error && <ErrorMessage className="text-center">{error}</ErrorMessage>}

          <Button
            type="submit"
            disabled={isSubmitting || loading}
            loading={isSubmitting || loading}
            loadingText="Linking Account..."
            className="w-full"
          >
            Link WHMCS Account
          </Button>
        </form>

        <div className="mt-4 text-center">
          <p className="text-xs text-gray-500">
            Your credentials are used only to verify your identity and migrate your data securely.
          </p>
        </div>
      </div>
    </div>
  );
}
