"use client";

import * as React from "react";
import { Clock, Repeat } from "lucide-react";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { formatMinutes, formatNumber } from "@/lib/format";
import { newOrderTexts as tx } from "@/lib/i18n/neworder";
import { countLines, countList, needsLink, needsQuantity, usesExtra } from "./charge";
import { Field } from "./field";
import type { NewOrderConfig, ServiceDTO } from "./types";

export type OrderFormValues = {
  link: string;
  quantity: string;
  comments: string;
  usernames: string;
  hashtags: string;
  hashtag: string;
  username: string;
  media: string;
  runs: string;
  interval: string;
  sub_username: string;
  sub_min: string;
  sub_max: string;
  sub_posts: string;
  sub_old_posts: string;
  sub_delay: string;
  sub_expiry: string;
};

export const EMPTY_VALUES: OrderFormValues = {
  link: "",
  quantity: "",
  comments: "",
  usernames: "",
  hashtags: "",
  hashtag: "",
  username: "",
  media: "",
  runs: "2",
  interval: "",
  sub_username: "",
  sub_min: "",
  sub_max: "",
  sub_posts: "",
  sub_old_posts: "",
  sub_delay: "0",
  sub_expiry: "",
};

type Props = {
  service: ServiceDTO;
  values: OrderFormValues;
  set: (key: keyof OrderFormValues, value: string) => void;
  errors: Record<string, string>;
  disabled: boolean;
  config: NewOrderConfig;
  drip: boolean;
  setDrip: (next: boolean) => void;
  quantityHint: React.ReactNode;
  quantityError?: string;
};

export function DynamicFields({
  service,
  values,
  set,
  errors,
  disabled,
  config,
  drip,
  setDrip,
  quantityHint,
  quantityError,
}: Props) {
  const type = service.type;
  const showLink = needsLink(type);
  const showQuantity = needsQuantity(type);
  const isSubscription = type === "SUBSCRIPTIONS";
  const showDrip = service.dripfeedEnabled && !isSubscription;
  const showAverageTime = config.averageTimeEnabled && service.averageTimeMinutes !== null;

  return (
    <div className="space-y-5">
      {showLink ? (
        <Field label={tx.linkLabel} htmlFor="link" error={errors.link}>
          <Input
            id="link"
            name="link"
            value={values.link}
            onChange={(e) => set("link", e.target.value)}
            placeholder={tx.linkPlaceholder}
            disabled={disabled}
            autoComplete="off"
            spellCheck={false}
            className="h-10"
          />
        </Field>
      ) : null}

      {type === "PACKAGE" ? (
        <p className="rounded-lg border border-blue-200 bg-blue-50 px-3 py-2.5 text-xs text-blue-800 dark:border-blue-500/25 dark:bg-blue-500/10 dark:text-blue-300">
          {tx.packageNote}
        </p>
      ) : null}

      {showQuantity ? (
        <Field
          label={tx.quantityLabel}
          htmlFor="quantity"
          error={quantityError ?? errors.quantity}
          hint={quantityHint}
        >
          <Input
            id="quantity"
            name="quantity"
            type="number"
            inputMode="numeric"
            min={service.min}
            max={service.max}
            step={service.increment && service.increment > 1 ? service.increment : 1}
            value={values.quantity}
            onChange={(e) => set("quantity", e.target.value)}
            placeholder={tx.quantityPlaceholder}
            disabled={disabled}
            className="h-10 font-mono tabular-nums"
          />
        </Field>
      ) : null}

      {usesExtra(type, "comments") ? (
        <Field
          label={tx.commentsLabel}
          htmlFor="comments"
          error={errors.comments}
          hint={tx.commentsCount(formatNumber(countLines(values.comments), 0))}
          badge={
            <span className="font-mono tabular-nums">
              {formatNumber(countLines(values.comments), 0)}
            </span>
          }
        >
          <Textarea
            id="comments"
            name="comments"
            rows={6}
            value={values.comments}
            onChange={(e) => set("comments", e.target.value)}
            placeholder={tx.commentsPlaceholder}
            disabled={disabled}
            className="font-mono text-xs"
          />
        </Field>
      ) : null}

      {usesExtra(type, "usernames") ? (
        <Field
          label={tx.usernamesLabel}
          htmlFor="usernames"
          error={errors.usernames}
          hint={tx.usernamesCount(formatNumber(countList(values.usernames), 0))}
        >
          <Textarea
            id="usernames"
            name="usernames"
            rows={4}
            value={values.usernames}
            onChange={(e) => set("usernames", e.target.value)}
            placeholder={tx.usernamesPlaceholder}
            disabled={disabled}
            className="font-mono text-xs"
          />
        </Field>
      ) : null}

      {usesExtra(type, "hashtags") ? (
        <Field label={tx.hashtagsLabel} htmlFor="hashtags" error={errors.hashtags}>
          <Textarea
            id="hashtags"
            name="hashtags"
            rows={3}
            value={values.hashtags}
            onChange={(e) => set("hashtags", e.target.value)}
            placeholder={tx.hashtagsPlaceholder}
            disabled={disabled}
            className="font-mono text-xs"
          />
        </Field>
      ) : null}

      {usesExtra(type, "hashtag") ? (
        <Field label={tx.hashtagLabel} htmlFor="hashtag" error={errors.hashtag}>
          <Input
            id="hashtag"
            name="hashtag"
            value={values.hashtag}
            onChange={(e) => set("hashtag", e.target.value)}
            placeholder={tx.hashtagPlaceholder}
            disabled={disabled}
            autoComplete="off"
            className="h-10"
          />
        </Field>
      ) : null}

      {usesExtra(type, "username") ? (
        <Field
          label={tx.usernameLabel}
          htmlFor="username"
          error={errors.username}
          hint={tx.usernameFollowersHint}
        >
          <Input
            id="username"
            name="username"
            value={values.username}
            onChange={(e) => set("username", e.target.value)}
            placeholder={tx.usernamePlaceholder}
            disabled={disabled}
            autoComplete="off"
            className="h-10"
          />
        </Field>
      ) : null}

      {usesExtra(type, "media") ? (
        <Field
          label={tx.mediaLabel}
          htmlFor="media"
          error={errors.media}
          hint={tx.mediaHint}
        >
          <Input
            id="media"
            name="media"
            value={values.media}
            onChange={(e) => set("media", e.target.value)}
            placeholder={tx.mediaPlaceholder}
            disabled={disabled}
            autoComplete="off"
            spellCheck={false}
            className="h-10"
          />
        </Field>
      ) : null}

      {isSubscription ? (
        <div className="space-y-5 rounded-2xl border bg-muted/30 p-4">
          <p className="font-display text-sm font-semibold tracking-tight">
            {tx.subscriptionTitle}
          </p>

          <Field
            label={tx.subUsernameLabel}
            htmlFor="sub_username"
            error={errors.sub_username}
          >
            <Input
              id="sub_username"
              name="sub_username"
              value={values.sub_username}
              onChange={(e) => set("sub_username", e.target.value)}
              placeholder={tx.subUsernamePlaceholder}
              disabled={disabled}
              autoComplete="off"
              className="h-10"
            />
          </Field>

          <div className="grid gap-4 sm:grid-cols-2">
            <Field label={tx.subMinLabel} htmlFor="sub_min" error={errors.sub_min}>
              <Input
                id="sub_min"
                name="sub_min"
                type="number"
                inputMode="numeric"
                min={service.min}
                max={service.max}
                value={values.sub_min}
                onChange={(e) => set("sub_min", e.target.value)}
                disabled={disabled}
                className="h-10 font-mono tabular-nums"
              />
            </Field>
            <Field label={tx.subMaxLabel} htmlFor="sub_max" error={errors.sub_max}>
              <Input
                id="sub_max"
                name="sub_max"
                type="number"
                inputMode="numeric"
                min={service.min}
                max={service.max}
                value={values.sub_max}
                onChange={(e) => set("sub_max", e.target.value)}
                disabled={disabled}
                className="h-10 font-mono tabular-nums"
              />
            </Field>
          </div>

          <div className="grid gap-4 sm:grid-cols-2">
            <Field
              label={tx.subPostsLabel}
              htmlFor="sub_posts"
              error={errors.sub_posts}
              hint={tx.subPostsHint}
            >
              <Input
                id="sub_posts"
                name="sub_posts"
                type="number"
                inputMode="numeric"
                min={0}
                value={values.sub_posts}
                onChange={(e) => set("sub_posts", e.target.value)}
                disabled={disabled}
                className="h-10 font-mono tabular-nums"
              />
            </Field>
            <Field
              label={tx.subOldPostsLabel}
              htmlFor="sub_old_posts"
              error={errors.sub_old_posts}
            >
              <Input
                id="sub_old_posts"
                name="sub_old_posts"
                type="number"
                inputMode="numeric"
                min={0}
                value={values.sub_old_posts}
                onChange={(e) => set("sub_old_posts", e.target.value)}
                disabled={disabled}
                className="h-10 font-mono tabular-nums"
              />
            </Field>
          </div>

          <div className="grid gap-4 sm:grid-cols-2">
            <Field label={tx.subDelayLabel} error={errors.sub_delay}>
              <input type="hidden" name="sub_delay" value={values.sub_delay} />
              <Select
                value={values.sub_delay}
                onValueChange={(v) => set("sub_delay", v)}
                disabled={disabled}
              >
                <SelectTrigger className="h-10 w-full">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {config.delayOptions.map((minutes) => (
                    <SelectItem key={minutes} value={String(minutes)}>
                      {minutes === 0 ? tx.subDelayNone : formatMinutes(minutes)}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </Field>
            <Field
              label={tx.subExpiryLabel}
              htmlFor="sub_expiry"
              error={errors.sub_expiry}
              hint={tx.subExpiryHint}
            >
              <Input
                id="sub_expiry"
                name="sub_expiry"
                type="date"
                value={values.sub_expiry}
                onChange={(e) => set("sub_expiry", e.target.value)}
                disabled={disabled}
                className="h-10 font-mono"
              />
            </Field>
          </div>
        </div>
      ) : null}

      {showAverageTime ? (
        <Field label={tx.averageTimeLabel}>
          <div className="flex items-center gap-2 rounded-lg border bg-muted/40 px-3 py-2 text-sm text-muted-foreground">
            <Clock className="size-4 shrink-0" />
            <span className="font-mono tabular-nums">
              {formatMinutes(service.averageTimeMinutes)}
            </span>
          </div>
        </Field>
      ) : null}

      {showDrip ? (
        <div className="space-y-4 rounded-2xl border p-4">
          <label className="flex items-start gap-2.5">
            <Checkbox
              checked={drip}
              onCheckedChange={(checked) => setDrip(checked === true)}
              disabled={disabled}
              className="mt-0.5"
            />
            <span className="space-y-0.5">
              <span className="flex items-center gap-1.5 text-sm font-medium">
                <Repeat className="size-3.5 text-primary" />
                {tx.dripfeedLabel}
              </span>
              <span className="block text-xs text-muted-foreground">{tx.dripfeedHint}</span>
            </span>
          </label>

          {drip ? (
            <>
              <input type="hidden" name="dripfeed" value="on" />
              <div className="grid gap-4 sm:grid-cols-2">
                <Field
                  label={tx.runsLabel}
                  htmlFor="runs"
                  error={errors.runs}
                  hint={tx.runsHint}
                >
                  <Input
                    id="runs"
                    name="runs"
                    type="number"
                    inputMode="numeric"
                    min={2}
                    max={1000}
                    value={values.runs}
                    onChange={(e) => set("runs", e.target.value)}
                    disabled={disabled}
                    className="h-10 font-mono tabular-nums"
                  />
                </Field>
                <Field
                  label={tx.intervalLabel}
                  htmlFor="interval"
                  error={errors.interval}
                  hint={tx.intervalHint(String(config.minDripIntervalMinutes))}
                >
                  <Input
                    id="interval"
                    name="interval"
                    type="number"
                    inputMode="numeric"
                    min={config.minDripIntervalMinutes}
                    value={values.interval}
                    onChange={(e) => set("interval", e.target.value)}
                    disabled={disabled}
                    className="h-10 font-mono tabular-nums"
                  />
                </Field>
              </div>
            </>
          ) : null}
        </div>
      ) : null}
    </div>
  );
}

export default DynamicFields;