"use client";

import { SettingsPageLayout } from "@/components/dashboard/settings/settings-page-layout";
import {
  SettingsSubnavCard,
  type SettingsSubnavItem,
} from "@/components/dashboard/settings/settings-subnav-card";
import { FormSkeleton } from "@/components/ui/form-skeleton";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { UnifiedFileUploader } from "@/components/shared/unified-file-uploader";
import { Loader2 } from "lucide-react";
import { useTranslations } from "next-intl";
import { useState } from "react";
import type { AdminCompanySettings } from "@/components/dashboard/settings/settings-api-types";

interface CompanySettingsViewProps {
  companySettings?: AdminCompanySettings | null;
  isLoading: boolean;
  error?: Error | null;
  formData: Partial<AdminCompanySettings>;
  onChangeForm: (data: Partial<AdminCompanySettings>) => void;
  onSubmit: () => Promise<void>;
  isSaving: boolean;
}

export function CompanySettingsView({
  companySettings,
  isLoading,
  error,
  formData,
  onChangeForm,
  onSubmit,
  isSaving,
}: CompanySettingsViewProps) {
  const t = useTranslations("dashboard.settings");

  const tabItems: SettingsSubnavItem[] = [
    { id: "fonts", label: t("site.tabs.fonts"), href: "/dashboard/settings/site?tab=fonts" },
    { id: "seo", label: t("site.tabs.seo"), href: "/dashboard/settings/site?tab=seo" },
    { id: "company", label: t("site.tabs.companyData"), href: "/dashboard/settings/company" },
  ];

  if (isLoading) {
    return (
      <SettingsPageLayout
        sideContent={<SettingsSubnavCard items={tabItems} activeId="company" />}
      >
        <section className="rounded-2xl border border-border bg-card p-6">
          <FormSkeleton rows={5} />
        </section>
      </SettingsPageLayout>
    );
  }

  if (error) {
    return (
      <SettingsPageLayout
        sideContent={<SettingsSubnavCard items={tabItems} activeId="company" />}
      >
        <div className="py-8 text-center text-red-500">
          {error.message || "Failed to load settings"}
        </div>
      </SettingsPageLayout>
    );
  }

  return (
    <SettingsPageLayout
      sideContent={<SettingsSubnavCard items={tabItems} activeId="company" />}
    >
      <section className="rounded-2xl border border-border bg-card p-6">
        <div className="space-y-6">
          {/* Logo Fields */}
          {(
            ["logo_primary", "logo_footer", "favicon", "default_image"] as const
          ).map((key) => (
            <LogoField
              key={key}
              title={t(`company.logo.${key}`)}
              currentValue={formData[key]}
              onChange={(value) => onChangeForm({ ...formData, [key]: value })}
            />
          ))}

          <div className="grid gap-4 md:grid-cols-2">
            <Field label={t("company.fields.name")}>
              <Input
                className="h-12 rounded-xl"
                value={formData.name || ""}
                onChange={(e) => onChangeForm({ ...formData, name: e.target.value })}
              />
            </Field>
            <Field label={t("company.fields.licenseNumber")}>
              <Input
                className="h-12 rounded-xl"
                value={formData.license_number || ""}
                onChange={(e) => onChangeForm({ ...formData, license_number: e.target.value })}
              />
            </Field>
            <Field label={t("company.fields.companyEmail")}>
              <Input
                type="email"
                className="h-12 rounded-xl"
                value={formData.company_email || ""}
                onChange={(e) => onChangeForm({ ...formData, company_email: e.target.value })}
              />
            </Field>
            <Field label={t("company.fields.companyPhone")}>
              <Input
                className="h-12 rounded-xl"
                value={formData.company_phone || ""}
                onChange={(e) => onChangeForm({ ...formData, company_phone: e.target.value })}
              />
            </Field>
            <Field label={t("company.fields.companyPhoneCountryCode")}>
              <Input
                className="h-12 rounded-xl"
                value={formData.company_phone_country_code || ""}
                onChange={(e) => onChangeForm({ ...formData, company_phone_country_code: e.target.value })}
              />
            </Field>
            <Field label={t("company.fields.city")}>
              <Input
                className="h-12 rounded-xl"
                value={formData.city || ""}
                onChange={(e) => onChangeForm({ ...formData, city: e.target.value })}
              />
            </Field>
            <Field label={t("company.fields.address")}>
              <Input
                className="h-12 rounded-xl"
                value={formData.address || ""}
                onChange={(e) => onChangeForm({ ...formData, address: e.target.value })}
              />
            </Field>
            <Field label={t("company.fields.mapLat")}>
              <Input
                type="number"
                className="h-12 rounded-xl"
                value={formData.map_lat || ""}
                onChange={(e) => onChangeForm({ ...formData, map_lat: Number(e.target.value) || null })}
              />
            </Field>
            <Field label={t("company.fields.mapLng")}>
              <Input
                type="number"
                className="h-12 rounded-xl"
                value={formData.map_lng || ""}
                onChange={(e) => onChangeForm({ ...formData, map_lng: Number(e.target.value) || null })}
              />
            </Field>
            <Field label={t("company.fields.websiteUrl")}>
              <Input
                type="url"
                className="h-12 rounded-xl"
                value={formData.website_url || ""}
                onChange={(e) => onChangeForm({ ...formData, website_url: e.target.value })}
              />
            </Field>
            <Field label={t("company.fields.managerName")}>
              <Input
                className="h-12 rounded-xl"
                value={formData.manager_name || ""}
                onChange={(e) => onChangeForm({ ...formData, manager_name: e.target.value })}
              />
            </Field>
            <Field label={t("company.fields.managerPhone")}>
              <Input
                className="h-12 rounded-xl"
                value={formData.manager_phone || ""}
                onChange={(e) => onChangeForm({ ...formData, manager_phone: e.target.value })}
              />
            </Field>
          </div>

          <Field label={t("company.fields.description")}>
            <Textarea
              className="min-h-[96px] rounded-xl"
              value={formData.description || ""}
              onChange={(e) => onChangeForm({ ...formData, description: e.target.value })}
            />
          </Field>

          <Button type="button" className="h-12 rounded-xl px-8" onClick={onSubmit} disabled={isSaving}>
            {isSaving && <Loader2 className="me-1 size-4 animate-spin" />}
            {isSaving ? t("actions.saving") : t("actions.saveChanges")}
          </Button>
        </div>
      </section>
    </SettingsPageLayout>
  );
}

function LogoField({ title, currentValue, onChange }: { title: string; currentValue?: string | File | null; onChange: (value: File | null) => void }) {
  const t = useTranslations("dashboard.settings");
  const [pendingFile, setPendingFile] = useState<File | null>(null);
  const serverUrl = typeof currentValue === "string" ? currentValue || null : null;

  const handleFileChange = (newFile: File | null) => {
    setPendingFile(newFile);
    onChange(newFile);
  };

  return (
    <div className="space-y-4 border-b border-border pb-4 last:border-0 last:pb-0">
      <div>
        <h3 className="text-sm font-bold text-foreground">{title}</h3>
        <p className="mt-1 text-xs text-muted-foreground">
          {t("company.logo.hint")}
        </p>
      </div>

      <UnifiedFileUploader
        multiple={false}
        accept="image/*"
        previewVariant="grid"
        value={pendingFile ? [pendingFile] : []}
        externalPreviewItems={!pendingFile && serverUrl ? [{ id: "existing", name: title, previewUrl: serverUrl }] : []}
        onChange={(files) => handleFileChange(files[0] ?? null)}
        labels={{ browseText: "Browse", dragText: "Drag & drop your image here", maxSizeText: "PNG, JPG up to 5MB" }}
        useGlobalSettings={false}
      />
    </div>
  );
}

function Field({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div className="space-y-2">
      <Label>{label}</Label>
      {children}
    </div>
  );
}