<PhoenixKitWeb.Components.LayoutWrapper.app_layout
  flash={@flash}
  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
  page_title="{@project_title} Billing Settings"
  current_path={@url_path}
  project_title={@project_title}
>
  <div class="container mx-auto px-4 py-6">
    <%!-- Header --%>
    <div class="flex items-center gap-4 mb-6">
      <.link
        navigate={PhoenixKit.Utils.Routes.path("/admin/billing")}
        class="btn btn-ghost btn-sm"
      >
        <.icon name="hero-arrow-left" class="w-4 h-4" />
      </.link>
      <div>
        <h1 class="text-3xl font-bold">Billing Settings</h1>
        <p class="text-base-content/60 mt-1">Configure billing module options</p>
      </div>
    </div>

    <%!-- Navigation Tabs --%>
    <div class="tabs tabs-boxed bg-base-200 p-1 mb-6">
      <.link
        navigate={PhoenixKit.Utils.Routes.path("/admin/settings/billing")}
        class="tab tab-active"
      >
        <.icon name="hero-cog-6-tooth" class="w-4 h-4 mr-2" /> General
      </.link>
      <.link
        navigate={PhoenixKit.Utils.Routes.path("/admin/settings/billing/providers")}
        class="tab"
      >
        <.icon name="hero-credit-card" class="w-4 h-4 mr-2" /> Payment Providers
      </.link>
      <.link
        navigate={PhoenixKit.Utils.Routes.path("/admin/billing/currencies")}
        class="tab"
      >
        <.icon name="hero-currency-dollar" class="w-4 h-4 mr-2" /> Currencies
      </.link>
      <.link
        navigate={PhoenixKit.Utils.Routes.path("/admin/billing/plans")}
        class="tab"
      >
        <.icon name="hero-clipboard-document-list" class="w-4 h-4 mr-2" /> Plans
      </.link>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <%!-- Module Status --%>
      <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
          <h2 class="card-title">Module Status</h2>
          <div class="flex items-center justify-between mt-4">
            <div>
              <p class="font-medium">Billing Module</p>
              <p class="text-sm text-base-content/60">Enable or disable billing functionality</p>
            </div>
            <label class="cursor-pointer">
              <input
                type="checkbox"
                class="toggle toggle-success toggle-lg"
                checked={@billing_enabled}
                phx-click="toggle_billing"
              />
            </label>
          </div>
        </div>
      </div>

      <%!-- General Settings --%>
      <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
          <h2 class="card-title">General Settings</h2>
          <form phx-submit="save_general" class="space-y-4 mt-4">
            <div class="form-control">
              <label class="label">
                <span class="label-text">Default Currency</span>
              </label>
              <select name="default_currency" class="select select-bordered">
                <option value="EUR" selected={@default_currency == "EUR"}>EUR - Euro</option>
                <option value="USD" selected={@default_currency == "USD"}>USD - US Dollar</option>
                <option value="GBP" selected={@default_currency == "GBP"}>
                  GBP - British Pound
                </option>
              </select>
            </div>

            <div class="grid grid-cols-3 gap-4">
              <div class="form-control">
                <label class="label">
                  <span class="label-text">Order Prefix</span>
                </label>
                <input
                  type="text"
                  name="order_prefix"
                  value={@order_prefix}
                  class="input input-bordered input-sm"
                  placeholder="ORD"
                />
              </div>
              <div class="form-control">
                <label class="label">
                  <span class="label-text">Invoice Prefix</span>
                </label>
                <input
                  type="text"
                  name="invoice_prefix"
                  value={@invoice_prefix}
                  class="input input-bordered input-sm"
                  placeholder="INV"
                />
              </div>
              <div class="form-control">
                <label class="label">
                  <span class="label-text">Receipt Prefix</span>
                </label>
                <input
                  type="text"
                  name="receipt_prefix"
                  value={@receipt_prefix}
                  class="input input-bordered input-sm"
                  placeholder="RCP"
                />
              </div>
            </div>

            <div class="form-control">
              <label class="label">
                <span class="label-text">Invoice Due Days</span>
              </label>
              <input
                type="number"
                name="invoice_due_days"
                value={@invoice_due_days}
                class="input input-bordered input-sm w-32"
                min="1"
                max="90"
              />
            </div>

            <div class="divider">Tax Settings</div>

            <div class="grid 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 checkbox-sm"
                  />
                  <span class="label-text">Enable Tax</span>
                </label>
              </div>
              <div class="form-control">
                <label class="label">
                  <span class="label-text">Default Tax Rate (%)</span>
                </label>
                <input
                  type="number"
                  name="tax_rate"
                  value={@tax_rate}
                  class="input input-bordered input-sm"
                  min="0"
                  max="100"
                  step="0.01"
                  phx-change="tax_rate_changed"
                />
              </div>
            </div>

            <%= if @suggested_tax_rate do %>
              <div class="alert alert-info py-2 mt-2">
                <div class="flex items-center gap-2">
                  <.icon name="hero-light-bulb" class="w-4 h-4" />
                  <span class="text-sm">
                    Suggested rate for selected country: <strong>{@suggested_tax_rate}%</strong>
                  </span>
                  <button
                    type="button"
                    class="btn btn-xs btn-primary"
                    phx-click="apply_suggested_tax"
                  >
                    Apply
                  </button>
                </div>
              </div>
            <% end %>

            <div class="card-actions justify-end mt-4">
              <button type="submit" class="btn btn-primary btn-sm">Save General Settings</button>
            </div>
          </form>
        </div>
      </div>

      <%!-- Company Information --%>
      <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
          <h2 class="card-title">Company Information</h2>
          <p class="text-sm text-base-content/60">Shown on invoices and receipts</p>
          <form phx-submit="save_company" class="space-y-4 mt-4">
            <%!-- Company Name (required) --%>
            <div class="form-control">
              <label class="label">
                <span class="label-text">Company Name <span class="text-error">*</span></span>
              </label>
              <input
                type="text"
                name="company_name"
                value={@company_name}
                class="input input-bordered"
                placeholder="Your Company Name"
                required
              />
            </div>

            <%!-- VAT Number (required) --%>
            <div class="form-control">
              <label class="label">
                <span class="label-text">VAT Number <span class="text-error">*</span></span>
              </label>
              <input
                type="text"
                name="company_vat"
                value={@company_vat}
                class="input input-bordered font-mono"
                placeholder="EE123456789"
                required
              />
            </div>

            <div class="divider">Address</div>

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

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

            <%!-- City + State row --%>
            <div class="grid grid-cols-2 gap-4">
              <div class="form-control">
                <label class="label">
                  <span class="label-text">City <span class="text-error">*</span></span>
                </label>
                <input
                  type="text"
                  name="company_city"
                  value={@company_city}
                  class="input input-bordered"
                  placeholder="Tallinn"
                  required
                />
              </div>
              <div class="form-control">
                <label class="label">
                  <span class="label-text">State/Region</span>
                </label>
                <input
                  type="text"
                  name="company_state"
                  value={@company_state}
                  class="input input-bordered"
                  placeholder="(optional)"
                />
              </div>
            </div>

            <%!-- Postal Code + Country row --%>
            <div class="grid grid-cols-2 gap-4">
              <div class="form-control">
                <label class="label">
                  <span class="label-text">Postal Code</span>
                </label>
                <input
                  type="text"
                  name="company_postal_code"
                  value={@company_postal_code}
                  class="input input-bordered font-mono"
                  placeholder="10115"
                />
              </div>
              <div class="form-control">
                <label class="label">
                  <span class="label-text">Country <span class="text-error">*</span></span>
                </label>
                <select
                  name="company_country"
                  class="select select-bordered"
                  phx-change="country_changed"
                  required
                >
                  <option value="">Select country...</option>
                  <%= for {name, code} <- @countries do %>
                    <option value={code} selected={@company_country == code}>
                      {name}
                    </option>
                  <% end %>
                </select>
              </div>
            </div>

            <div class="card-actions justify-end mt-4">
              <button type="submit" class="btn btn-primary btn-sm">Save Company Info</button>
            </div>
          </form>
        </div>
      </div>

      <%!-- Bank Details --%>
      <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
          <h2 class="card-title">Bank Details</h2>
          <p class="text-sm text-base-content/60">For bank transfer payments</p>
          <form phx-submit="save_bank" class="space-y-4 mt-4">
            <div class="form-control">
              <label class="label">
                <span class="label-text">Bank Name</span>
              </label>
              <input
                type="text"
                name="bank_name"
                value={@bank_name}
                class="input input-bordered"
                placeholder="Bank Name"
              />
            </div>

            <div class="form-control">
              <label class="label">
                <span class="label-text">IBAN</span>
              </label>
              <input
                type="text"
                name="bank_iban"
                value={@bank_iban}
                class="input input-bordered font-mono"
                placeholder="EE00 0000 0000 0000 0000"
              />
            </div>

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

            <div class="card-actions justify-end mt-4">
              <button type="submit" class="btn btn-primary btn-sm">Save Bank Details</button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <%!-- Quick Links --%>
    <div class="card bg-base-100 shadow-xl mt-6">
      <div class="card-body">
        <h2 class="card-title">Related Settings</h2>
        <div class="flex flex-wrap gap-4 mt-4">
          <.link
            navigate={PhoenixKit.Utils.Routes.path("/admin/settings/billing/providers")}
            class="btn btn-primary"
          >
            <.icon name="hero-credit-card" class="w-5 h-5" /> Payment Providers
          </.link>
          <.link
            navigate={PhoenixKit.Utils.Routes.path("/admin/billing/currencies")}
            class="btn btn-outline"
          >
            <.icon name="hero-currency-dollar" class="w-5 h-5" /> Manage Currencies
          </.link>
          <.link
            navigate={PhoenixKit.Utils.Routes.path("/admin/billing/plans")}
            class="btn btn-outline"
          >
            <.icon name="hero-clipboard-document-list" class="w-5 h-5" /> Subscription Plans
          </.link>
          <.link navigate={PhoenixKit.Utils.Routes.path("/admin/modules")} class="btn btn-outline">
            <.icon name="hero-squares-2x2" class="w-5 h-5" /> All Modules
          </.link>
        </div>
      </div>
    </div>
  </div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>
