"use client";

import { useState } from "react";
import { Settings2, Construction } 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 {
  updatePreferencesSettings,
  type StoreSettingsData,
} from "@/lib/actions/settings";

interface PreferencesSettingsProps {
  settings: StoreSettingsData;
}

/**
 * Regional, formatting, and store availability preferences.
 */
export function PreferencesSettings({ settings }: PreferencesSettingsProps) {
  const [timezone, setTimezone] = useState(settings.timezone ?? "Asia/Dhaka");
  const [dateFormat, setDateFormat] = useState(
    settings.dateFormat ?? "MMM d, yyyy",
  );
  const [maintenance, setMaintenance] = useState(settings.maintenanceMode);

  return (
    <SettingsCard
      title="Store Preferences"
      description="Regional settings and storefront availability."
      icon={<Settings2 className="h-4 w-4" />}
      footer={
        <SaveButton
          onSave={() =>
            updatePreferencesSettings({
              timezone,
              dateFormat,
              maintenanceMode: maintenance,
            })
          }
        />
      }
    >
      <div className="space-y-7">
        <SettingField
          id="timezone"
          label="Time zone"
          description="Used for all order timestamps and analytics."
          control={
            <Select
              items={[
                { value: "Asia/Dhaka", label: "(GMT+6) Dhaka" },
                { value: "Asia/Kolkata", label: "(GMT+5:30) Kolkata" },
                { value: "Asia/Singapore", label: "(GMT+8) Singapore" },
                { value: "UTC", label: "UTC" },
              ]}
              value={timezone}
              onValueChange={(v) => setTimezone((v as string) ?? "Asia/Dhaka")}
            >
              <SelectTrigger id="timezone" className="w-full">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="Asia/Dhaka">(GMT+6) Dhaka</SelectItem>
                <SelectItem value="Asia/Kolkata">(GMT+5:30) Kolkata</SelectItem>
                <SelectItem value="Asia/Singapore">
                  (GMT+8) Singapore
                </SelectItem>
                <SelectItem value="UTC">UTC</SelectItem>
              </SelectContent>
            </Select>
          }
        />

        <SettingField
          id="date-format"
          label="Date format"
          description="How dates appear across the admin dashboard and emails."
          control={
            <Select
              items={[
                { value: "MMM d, yyyy", label: "Sep 10, 2026" },
                {
                  value: "MMM d, yyyy · h:mm a",
                  label: "Sep 10, 2026 · 9:30 AM",
                },
                { value: "dd/MM/yyyy", label: "10/09/2026" },
                { value: "yyyy-MM-dd", label: "2026-09-10" },
              ]}
              value={dateFormat}
              onValueChange={(v) =>
                setDateFormat((v as string) ?? "MMM d, yyyy")
              }
            >
              <SelectTrigger id="date-format" className="w-full">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="MMM d, yyyy">Sep 10, 2026</SelectItem>
                <SelectItem value="MMM d, yyyy · h:mm a">
                  Sep 10, 2026 · 9:30 AM
                </SelectItem>
                <SelectItem value="dd/MM/yyyy">10/09/2026</SelectItem>
                <SelectItem value="yyyy-MM-dd">2026-09-10</SelectItem>
              </SelectContent>
            </Select>
          }
        />

        <Separatorish />

        <SettingField
          id="maintenance"
          label="Store maintenance mode"
          description="Temporarily hide the storefront while you work. Admins can still log in."
          controlClassName="sm:w-auto sm:shrink-0"
          control={
            <Switch
              id="maintenance"
              checked={maintenance}
              onCheckedChange={setMaintenance}
            />
          }
        />

        {maintenance && (
          <div className="flex items-start gap-2.5 rounded-lg border border-amber-600/20 bg-amber-500/5 px-3.5 py-3 text-sm text-amber-700 dark:text-amber-400">
            <Construction className="mt-0.5 size-4 shrink-0" />
            <p>
              The storefront is currently hidden. Customers will see a
              maintenance page. Remember to turn this off before a campaign.
            </p>
          </div>
        )}
      </div>
    </SettingsCard>
  );
}

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