"use client";

import { useState } from "react";
import { ShoppingCart, Package } from "lucide-react";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { SettingsCard } from "./settings-card";
import { SettingField } from "./setting-field";
import { SaveButton } from "./save-button";
import {
  updateOrderSettings,
  type StoreSettingsData,
} from "@/lib/actions/settings";

interface OrderSettingsProps {
  settings: StoreSettingsData;
}

/**
 * How the store processes incoming orders.
 */
export function OrderSettings({ settings }: OrderSettingsProps) {
  const [defaultStatus, setDefaultStatus] = useState(
    settings.defaultOrderStatus ?? "processing",
  );
  const [autoProcess, setAutoProcess] = useState(
    settings.autoProcessPaidOrders,
  );
  const [allowCancellation, setAllowCancellation] = useState(
    settings.allowCancellation,
  );
  const [allowReturns, setAllowReturns] = useState(settings.allowReturns);

  return (
    <SettingsCard
      title="Order Settings"
      description="Control how new orders are processed and handled."
      icon={<ShoppingCart className="h-4 w-4" />}
      footer={
        <SaveButton
          onSave={() =>
            updateOrderSettings({
              defaultOrderStatus: defaultStatus as
                | "pending"
                | "processing"
                | "shipped",
              autoProcessPaidOrders: autoProcess,
              allowCancellation,
              allowReturns,
            })
          }
        />
      }
    >
      <div className="space-y-7">
        <SettingField
          id="default-order-status"
          label="Default order status"
          description="Applied to new orders placed through the storefront."
          control={
            <Select
              items={[
                { value: "pending", label: "Pending" },
                { value: "processing", label: "Processing" },
                { value: "shipped", label: "Shipped" },
              ]}
              value={defaultStatus}
              onValueChange={(v) =>
                setDefaultStatus(
                  (v as
                    | "pending"
                    | "processing"
                    | "shipped"
                    | "delivered"
                    | "cancelled") ?? "processing",
                )
              }
            >
              <SelectTrigger id="default-order-status" className="w-full">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="pending">Pending</SelectItem>
                <SelectItem value="processing">Processing</SelectItem>
                <SelectItem value="shipped">Shipped</SelectItem>
              </SelectContent>
            </Select>
          }
        />

        <SettingField
          id="auto-process"
          label="Auto-process paid orders"
          description='Move paid orders to "Processing" automatically once payment is confirmed.'
          controlClassName="sm:w-auto sm:shrink-0 sm:justify-end"
          control={
            <Switch
              id="auto-process"
              checked={autoProcess}
              onCheckedChange={setAutoProcess}
            />
          }
        />

        <Separatorish />

        <SettingField
          id="allow-cancellation"
          label="Allow order cancellation"
          description="Let customers cancel orders before they are shipped."
          controlClassName="sm:w-auto sm:shrink-0 sm:justify-end"
          control={
            <Switch
              id="allow-cancellation"
              checked={allowCancellation}
              onCheckedChange={setAllowCancellation}
            />
          }
        />

        <SettingField
          id="allow-returns"
          label="Allow returns"
          description="Accept return requests within the return window after delivery."
          controlClassName="sm:w-auto sm:shrink-0 sm:justify-end"
          control={
            <Switch
              id="allow-returns"
              checked={allowReturns}
              onCheckedChange={setAllowReturns}
            />
          }
        />

        <div className="flex items-start gap-2.5 rounded-lg border bg-muted/30 px-3.5 py-3 text-sm text-muted-foreground">
          <Package className="mt-0.5 size-4 shrink-0" />
          <p>
            Orders currently in{" "}
            <span className="font-medium text-foreground">Processing</span> will
            keep their state even if the default status changes.
          </p>
        </div>
      </div>
    </SettingsCard>
  );
}

function Separatorish() {
  return <div className="h-px w-full bg-border/60" aria-hidden />;
}