<PhoenixKitWeb.Components.LayoutWrapper.app_layout
  flash={@flash}
  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
  page_title="{@project_title} - Organization"
  current_path={@current_path}
  project_title={@project_title}
  current_locale={@current_locale}
>
  <div class="container mx-auto px-4 py-6">
    <.admin_page_header
      back={PhoenixKit.Utils.Routes.path("/admin/settings")}
      title={gettext("Organization Settings")}
      subtitle={gettext("Company information shared across Legal and Billing modules")}
    />

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <%!-- Company Information --%>
      <div class="card bg-base-100 shadow-xl">
        <div class="card-body gap-0.5">
          <h2 class="card-title">
            <.icon name="hero-building-office-2" class="w-5 h-5" />
            {gettext("Company Information")}
          </h2>
          <p class="text-sm text-base-content/60 flex-none">
            {gettext("Used in legal documents and invoices")}
          </p>

          <form phx-submit="save_company" class="space-y-4">
            <%!-- Row: Company Name + Country --%>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div class="form-control">
                <label class="label">
                  <span class="label-text">
                    {gettext("Company Name")} <span class="text-error">*</span>
                  </span>
                </label>
                <input
                  type="text"
                  name="company_name"
                  value={@company_name}
                  class="input input-bordered w-full"
                  placeholder={gettext("Your Company Name")}
                  required
                />
              </div>

              <div class="form-control">
                <label class="label">
                  <span class="label-text">
                    {gettext("Country")} <span class="text-error">*</span>
                  </span>
                </label>
                <select
                  name="company_country"
                  class="select select-bordered w-full"
                  phx-change="country_changed"
                  required
                >
                  <option value="">{gettext("Select country...")}</option>
                  <%= for {name, code} <- @countries do %>
                    <option value={code} selected={@company_country == code}>
                      {name}
                    </option>
                  <% end %>
                </select>
              </div>
            </div>

            <div class="divider text-xs">{gettext("Address")}</div>

            <%!-- Row: Street Address --%>
            <div class="form-control">
              <label class="label">
                <span class="label-text">
                  {gettext("Street Address")} <span class="text-error">*</span>
                </span>
              </label>
              <input
                type="text"
                name="company_address_line1"
                value={@company_address_line1}
                class="input input-bordered w-full"
                placeholder={gettext("123 Business Street")}
                required
              />
            </div>

            <%!-- Row: Address Line 2 --%>
            <div class="form-control">
              <label class="label">
                <span class="label-text">{gettext("Address Line 2")}</span>
              </label>
              <input
                type="text"
                name="company_address_line2"
                value={@company_address_line2}
                class="input input-bordered w-full"
                placeholder={gettext("Suite, Floor, Building (optional)")}
              />
            </div>

            <%!-- Row: City + State/Province + Postal Code --%>
            <div class="grid grid-cols-3 gap-4">
              <div class="form-control">
                <label class="label">
                  <span class="label-text">
                    {gettext("City")} <span class="text-error">*</span>
                  </span>
                </label>
                <input
                  type="text"
                  name="company_city"
                  value={@company_city}
                  class="input input-bordered w-full"
                  placeholder={gettext("City")}
                  required
                />
              </div>

              <div class="form-control">
                <label class="label">
                  <span class="label-text">{@subdivision_label}</span>
                </label>
                <input
                  type="text"
                  name="company_state"
                  value={@company_state}
                  class="input input-bordered w-full"
                  placeholder={gettext("(optional)")}
                />
              </div>

              <div class="form-control">
                <label class="label">
                  <span class="label-text">{gettext("Postal Code")}</span>
                </label>
                <input
                  type="text"
                  name="company_postal_code"
                  value={@company_postal_code}
                  class="input input-bordered w-full font-mono"
                  placeholder="10115"
                />
              </div>
            </div>

            <div class="divider text-xs">{gettext("Tax & Registration")}</div>

            <%!-- Row: VAT Number + Registration Number --%>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div class="form-control">
                <label class="label">
                  <span class="label-text">
                    {gettext("VAT Number")} <span class="text-error">*</span>
                  </span>
                </label>
                <input
                  type="text"
                  name="company_vat"
                  value={@company_vat}
                  class="input input-bordered w-full font-mono"
                  placeholder={
                    if @eu_country, do: "#{@company_country}123456789", else: gettext("Tax ID")
                  }
                  required
                />
                <%= if @eu_country do %>
                  <label class="label">
                    <span class="label-text-alt text-info">
                      <.icon name="hero-information-circle" class="w-4 h-4 inline" />
                      {gettext("EU format: %{country}123456789", country: @company_country)}
                    </span>
                  </label>
                <% end %>
              </div>

              <div class="form-control">
                <label class="label">
                  <span class="label-text">{gettext("Registration Number")}</span>
                </label>
                <input
                  type="text"
                  name="company_registration"
                  value={@company_registration}
                  class="input input-bordered w-full font-mono"
                  placeholder={gettext("Business reg. number (optional)")}
                />
              </div>
            </div>

            <div class="card-actions justify-end mt-4">
              <button type="submit" class="btn btn-primary">
                <.icon name="hero-check" class="w-4 h-4" />
                {gettext("Save Company Info")}
              </button>
            </div>
          </form>
        </div>
      </div>

      <%!-- Right column: Bank + Tax + Site URL stacked --%>
      <div class="space-y-6">
        <%!-- Bank Details --%>
        <div class="card bg-base-100 shadow-xl">
          <div class="card-body">
            <h2 class="card-title">
              <.icon name="hero-building-library" class="w-5 h-5" />
              {gettext("Bank Details")}
            </h2>
            <p class="text-sm text-base-content/60">
              {gettext("For bank transfer payments on invoices")}
            </p>

            <form phx-submit="save_bank" class="space-y-4 mt-4">
              <div class="form-control">
                <label class="label">
                  <span class="label-text">{gettext("Bank Name")}</span>
                </label>
                <input
                  type="text"
                  name="bank_name"
                  value={@bank_name}
                  class="input input-bordered w-full"
                  placeholder={gettext("Bank Name")}
                />
              </div>

              <%!-- Row: IBAN + SWIFT --%>
              <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                <div class="form-control sm:col-span-2">
                  <label class="label">
                    <span class="label-text">{gettext("IBAN")}</span>
                  </label>
                  <input
                    type="text"
                    name="bank_iban"
                    value={@bank_iban}
                    class="input input-bordered w-full font-mono"
                    placeholder="EE00 0000 0000 0000 0000"
                  />
                </div>

                <div class="form-control">
                  <label class="label">
                    <span class="label-text">{gettext("SWIFT/BIC")}</span>
                  </label>
                  <input
                    type="text"
                    name="bank_swift"
                    value={@bank_swift}
                    class="input input-bordered w-full font-mono"
                    placeholder="XXXXEEHH"
                  />
                </div>
              </div>

              <div class="card-actions justify-end mt-4">
                <button type="submit" class="btn btn-primary">
                  <.icon name="hero-check" class="w-4 h-4" />
                  {gettext("Save Bank Details")}
                </button>
              </div>
            </form>
          </div>
        </div>

        <%!-- Tax Settings --%>
        <div class="card bg-base-100 shadow-xl">
          <div class="card-body">
            <h2 class="card-title">
              <.icon name="hero-receipt-percent" class="w-5 h-5" />
              {gettext("Tax Settings")}
            </h2>
            <p class="text-sm text-base-content/60">
              {gettext("Default tax rate applied across Billing and Shop modules")}
            </p>

            <form phx-submit="save_tax" class="space-y-4 mt-4">
              <%!-- Row: Enable Tax + Tax Rate --%>
              <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 items-end">
                <div class="form-control">
                  <label class="label cursor-pointer justify-start gap-3">
                    <input
                      type="checkbox"
                      name="tax_enabled"
                      value="true"
                      checked={@tax_enabled}
                      class="checkbox checkbox-primary"
                    />
                    <span class="label-text font-medium">{gettext("Enable Tax")}</span>
                  </label>
                </div>

                <div class="form-control">
                  <label class="label">
                    <span class="label-text">{gettext("Default Tax Rate")}</span>
                  </label>
                  <div class="join">
                    <input
                      type="number"
                      name="tax_rate"
                      value={@tax_rate}
                      min="0"
                      max="100"
                      step="0.01"
                      class="input input-bordered join-item w-24 font-mono"
                      phx-change="tax_rate_changed"
                      phx-debounce="300"
                    />
                    <span class="btn btn-disabled join-item">%</span>
                  </div>
                </div>
              </div>

              <%= if @suggested_tax_rate do %>
                <div class="alert alert-info py-2">
                  <.icon name="hero-light-bulb" class="w-4 h-4" />
                  <span class="text-sm">
                    {gettext("Standard rate for your country: %{rate}%",
                      rate: @suggested_tax_rate
                    )}
                  </span>
                  <button
                    type="button"
                    phx-click="apply_suggested_tax"
                    class="btn btn-xs btn-primary"
                  >
                    {gettext("Apply")}
                  </button>
                </div>
              <% end %>

              <div class="card-actions justify-end mt-4">
                <button type="submit" class="btn btn-primary">
                  <.icon name="hero-check" class="w-4 h-4" />
                  {gettext("Save Tax Settings")}
                </button>
              </div>
            </form>
          </div>
        </div>

        <%!-- Site URL (from General Settings) --%>
        <div class="card bg-base-100 shadow-xl">
          <div class="card-body">
            <div class="flex items-center justify-between">
              <h2 class="card-title">
                <.icon name="hero-globe-alt" class="w-5 h-5" />
                {gettext("Site URL")}
              </h2>
              <.link
                navigate={
                  PhoenixKit.Utils.Routes.path("/admin/settings", locale: @current_locale_base)
                }
                class="btn btn-sm btn-primary"
              >
                <.icon name="hero-pencil-square" class="w-4 h-4" />
                {gettext("Edit in General")}
              </.link>
            </div>
            <p class="text-sm text-base-content/60">
              {gettext("Used in legal documents and sitemap generation")}
            </p>

            <div class="bg-base-200 rounded-lg p-4 mt-4">
              <%= if @site_url != "" do %>
                <div class="flex items-center gap-2">
                  <.icon name="hero-globe-alt" class="w-5 h-5 text-primary" />
                  <a href={@site_url} target="_blank" class="link link-primary">
                    {@site_url}
                  </a>
                </div>
              <% else %>
                <div class="flex items-center gap-2 text-base-content/60">
                  <.icon name="hero-globe-alt" class="w-5 h-5" />
                  <span class="italic">{gettext("Not configured")}</span>
                </div>
              <% end %>
            </div>
          </div>
        </div>
      </div>
    </div>

    <%!-- Info Alert --%>
    <div class="alert alert-info mt-6">
      <.icon name="hero-information-circle" class="w-6 h-6" />
      <div>
        <p class="font-semibold">{gettext("Shared across modules")}</p>
        <p class="text-sm">
          {gettext(
            "Company info, tax settings, and bank details are shared across Legal, Billing, and Shop modules."
          )}
        </p>
      </div>
    </div>
  </div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>
