"use client";

import React, { useEffect, useState, useCallback } from "react";
import Select from "react-select";
import AsyncSelect from "react-select/async";
import toast from "react-hot-toast";
import styles from "../../commonstyle/FormStyles.module.css";
import { fetchApi } from "@/lib/api/http";
import { Plus, Trash2 } from "lucide-react";
import {
  createAuditSchedule,
  updateAuditSchedule,
  getAuditSchedule,
  AUDIT_SCHEDULES_API_BASE_URL,
} from "@/lib/api/audit-schedule.api";
import type {
  CreateAuditScheduleDto,
  CreateAuditRowDto,
  AuditType,
  AuditMode,
} from "@/lib/api/types/audit-schedule.types";

// ─── Type aliases ──────────────────────────────────────────────────────────
type CompanyOpt = { id: number; name: string; city?: string };
type UserOpt = { id: number; firstName: string; lastName: string; email: string };
type StandardOpt = { id: number; name: string; title?: string };
const toTimeInput = (t: string): string => (t ? t.slice(0, 5) : ""); // "09:00:00" → "09:00"
const toDbTime = (t: string): string =>
  t ? (t.length === 5 ? `${t}:00` : t) : "09:00:00"; // "09:00" → "09:00:00"
interface SelectOption {
  value: number | string;
  label: string;
}

interface Props {
  isOpen: boolean;
  onClose: () => void;
  refreshData?: () => void;
  editId?: number | null;
}

const TIME_OPTIONS = [
  { label: "09.00AM", time: "09:00:00" },
  { label: "10.00AM", time: "10:00:00" },
  { label: "11.00AM", time: "11:00:00" },
  { label: "12.00PM", time: "12:00:00" },
  { label: "01.00PM", time: "13:00:00" },
  { label: "02.00PM", time: "14:00:00" },
  { label: "03.00PM", time: "15:00:00" },
  { label: "04.00PM", time: "16:00:00" },
];

const AUDIT_TYPES: { value: AuditType; label: string }[] = [
  { value: "INITIAL", label: "Initial Audit" },
  { value: "SURVEILLANCE", label: "Surveillance Audit" },
  { value: "RECERTIFICATION", label: "Recertification" },
  { value: "TRANSFER", label: "Transfer Audit" },
  { value: "FOLLOW_UP", label: "Follow-up Audit" },
];

const AUDIT_MODES: { value: AuditMode; label: string }[] = [
  { value: "ONSITE", label: "🏢 On-site" },
  { value: "REMOTE", label: "💻 Remote" },
  { value: "HYBRID", label: "🔀 Hybrid" },
];

const CLIENT_GROUP_OPTIONS: SelectOption[] = [
  { value: "QRS", label: "QRS" },
  { value: "IICC", label: "IICC" },
];

const DEFAULT_ROW: CreateAuditRowDto = {
  audit_type: "INITIAL",
  audit_stage: "",
  audit_mode: "ONSITE",
  accreditation: "",
  company_id: 0,
  lead_auditor_id: 0,
  co_auditor_ids: [],
  standard_ids: [],
  audit_time: "09:00:00",
  audit_time_label: "09.00AM",
  notes: "",
};

export default function AuditScheduleForm({
  isOpen,
  onClose,
  refreshData,
  editId,
}: Props) {
  const isEdit = !!editId;

  // ── Schedule-level fields ───────────────────────────────────────────────
  const [scheduleDate, setScheduleDate] = useState("");
  const [title, setTitle] = useState("");
  const [clientGroup, setClientGroup] = useState<"QRS" | "IICC">("QRS");
  const [coordinatorId, setCoordinatorId] = useState<number | null>(null);
  const [sourceEmail, setSourceEmail] = useState("");
  const [notes, setNotes] = useState("");

  // ── Rows ────────────────────────────────────────────────────────────────
  const [rows, setRows] = useState<CreateAuditRowDto[]>([{ ...DEFAULT_ROW }]);

  // ── Lookup caches ───────────────────────────────────────────────────────
  const [users, setUsers] = useState<UserOpt[]>([]);
  const [standards, setStandards] = useState<StandardOpt[]>([]);

  // ── UI state ────────────────────────────────────────────────────────────
  const [submitting, setSubmitting] = useState(false);
  const [loading, setLoading] = useState(false);

  // ── Load users + standards once on open ─────────────────────────────────
  useEffect(() => {
    if (!isOpen) return;

    fetchApi<{ data: UserOpt[] } | UserOpt[]>(
      `${AUDIT_SCHEDULES_API_BASE_URL}/users?limit=200`,
    )
      .then((res: any) => {
        const list = Array.isArray(res) ? res : res?.data ?? [];
        setUsers(list);
      })
      .catch(() => setUsers([]));

    fetchApi<StandardOpt[] | { data: StandardOpt[] }>(
      `${AUDIT_SCHEDULES_API_BASE_URL}/standards`,
    )
      .then((res: any) => {
        const list = Array.isArray(res) ? res : res?.data ?? [];
        setStandards(list);
      })
      .catch(() => setStandards([]));
  }, [isOpen]);

  // ── If editing, fetch the schedule ──────────────────────────────────────
  useEffect(() => {
    if (!isOpen || !editId) return;

    setLoading(true);
    getAuditSchedule(editId)
      .then((sch) => {
        setScheduleDate(sch.schedule_date);
        setTitle(sch.title);
        setClientGroup((sch.client_group as any) ?? "QRS");
        setCoordinatorId(sch.coordinator_id);
        setSourceEmail(sch.source_email ?? "");
        setNotes(sch.notes ?? "");
        setRows(
          (sch.rows ?? []).map((r) => ({
            audit_type: r.audit_type,
            audit_stage: r.audit_stage ?? "",
            audit_mode: r.audit_mode,
            accreditation: r.accreditation ?? "",
            company_id: r.company_id,
            lead_auditor_id: r.lead_auditor_id,
            co_auditor_ids: ((r as any).co_auditors ?? []).map((a: any) => a.id),
            standard_ids: (r.standards ?? []).map((s) => s.id),
            audit_time: r.audit_time ?? "09:00:00",
            audit_time_label: r.audit_time_label ?? "09.00AM",
            notes: r.notes ?? "",
          })),
        );
      })
      .catch((err) => toast.error(err?.message || "Failed to load schedule"))
      .finally(() => setLoading(false));
  }, [isOpen, editId]);

  // ── Reset on close ──────────────────────────────────────────────────────
  useEffect(() => {
    if (!isOpen) {
      setScheduleDate("");
      setTitle("");
      setClientGroup("QRS");
      setCoordinatorId(null);
      setSourceEmail("");
      setNotes("");
      setRows([{ ...DEFAULT_ROW }]);
    }
  }, [isOpen]);

  // ── Async company search ────────────────────────────────────────────────
  const searchCompanies = useCallback(
    async (input: string): Promise<SelectOption[]> => {
      if (!input || input.length < 2) return [];
      try {
        const res = await fetchApi<{ data: CompanyOpt[] } | CompanyOpt[]>(
          `${AUDIT_SCHEDULES_API_BASE_URL}/companies?search=${encodeURIComponent(
            input,
          )}&limit=20`,
        );
        const list = Array.isArray(res) ? res : (res as any)?.data ?? [];
        return list.map((c: CompanyOpt) => ({
          value: c.id,
          label: `${c.name}${c.city ? ` (${c.city})` : ""}`,
        }));
      } catch {
        return [];
      }
    },
    [],
  );

  // ── Row helpers ─────────────────────────────────────────────────────────
  const updateRow = (index: number, patch: Partial<CreateAuditRowDto>) => {
    setRows((prev) => prev.map((r, i) => (i === index ? { ...r, ...patch } : r)));
  };

  const addRow = () => setRows((prev) => [...prev, { ...DEFAULT_ROW }]);

  const removeRow = (index: number) => {
    if (rows.length === 1) {
      toast.error("Schedule must have at least one audit row");
      return;
    }
    setRows((prev) => prev.filter((_, i) => i !== index));
  };

  // ── Submit ──────────────────────────────────────────────────────────────
  const handleSubmit = async (e?: React.FormEvent) => {
    e?.preventDefault();
    if (!scheduleDate) return toast.error("Pick a schedule date");
    if (!title.trim()) return toast.error("Title is required");
    if (!coordinatorId) return toast.error("Select a coordinator");

    if (!isEdit) {
      if (rows.length === 0) return toast.error("Add at least one audit row");
      for (let i = 0; i < rows.length; i++) {
        const r = rows[i];
        if (!r.company_id) return toast.error(`Row #${i + 1}: select a company`);
        if (!r.lead_auditor_id)
          return toast.error(`Row #${i + 1}: select a lead auditor`);
        if (!r.standard_ids.length)
          return toast.error(`Row #${i + 1}: select at least one standard`);
      }
    }

    setSubmitting(true);
    try {
      if (isEdit) {
        await updateAuditSchedule(editId!, {
          schedule_date: scheduleDate,
          title: title.trim(),
          client_group: clientGroup,
          coordinator_id: coordinatorId,
          source_email: sourceEmail.trim() || undefined,
          notes: notes.trim() || undefined,
        });
        toast.success("Schedule updated");
      } else {
        const dto: CreateAuditScheduleDto = {
          schedule_date: scheduleDate,
          title: title.trim(),
          client_group: clientGroup,
          coordinator_id: coordinatorId,
          source_email: sourceEmail.trim() || undefined,
          notes: notes.trim() || undefined,
          rows: rows.map((r) => ({
            ...r,
            audit_stage: r.audit_stage?.trim() || undefined,
            accreditation: r.accreditation?.trim() || undefined,
            notes: r.notes?.trim() || undefined,
          })),
        };
        await createAuditSchedule(dto);
        toast.success("Schedule created in DRAFT. Publish when ready.");
      }
      refreshData?.();
      onClose();
    } catch (err: any) {
      toast.error(err?.message || "Failed to save schedule");
    } finally {
      setSubmitting(false);
    }
  };

  if (!isOpen) return null;

  // ─────────────────────────────────────────────────────────────────────────
  // Render — uses your existing CSS module classes:
  // modalOverlay, modalContent, modalHeader, modalTitle, modalSubtitle,
  // closeBtn, formBody, sectionHeader, sectionDot, grid2, formGroup, full,
  // label, labelRequired, input, select, textarea, modalFooter, cancelBtn,
  // saveBtn, error
  // ─────────────────────────────────────────────────────────────────────────
  return (
    <div className={styles.modalOverlay} onClick={onClose}>
      <div
        className={styles.modalContent}
        onClick={(e) => e.stopPropagation()}
        style={{ maxWidth: 1100, width: "95%" }}
      >
        <div className={styles.modalHeader}>
          <div>
            <h2 className={styles.modalTitle}>
              {isEdit ? "✏️ Edit Schedule" : "＋ New Audit Schedule"}
            </h2>
            <p className={styles.modalSubtitle}>
              {isEdit
                ? "Update the schedule metadata"
                : "Create a new audit schedule with one or more audit rows"}
            </p>
          </div>
          <button className={styles.closeBtn} onClick={onClose} type="button">
            ✕
          </button>
        </div>

        {loading ? (
          <div style={{ padding: 60, textAlign: "center", color: "#9ca3af" }}>
            Loading schedule...
          </div>
        ) : (
          <form onSubmit={handleSubmit} className={styles.form}>
            <div className={styles.formBody}>
              {/* ══ Schedule Metadata ═══════════════════════════════════ */}
              <div className={styles.sectionHeader}>
                <span className={styles.sectionDot}></span>
                Schedule Details
              </div>

              <div className={styles.grid2}>
                <div className={styles.formGroup}>
                  <label className={`${styles.label} ${styles.labelRequired}`}>
                    Schedule Date
                  </label>
                  <input
                    type="date"
                    className={styles.input}
                    value={scheduleDate}
                    onChange={(e) => setScheduleDate(e.target.value)}
                  />
                </div>

                <div className={styles.formGroup}>
                  <label className={`${styles.label} ${styles.labelRequired}`}>
                    Title
                  </label>
                  <input
                    type="text"
                    className={styles.input}
                    value={title}
                    onChange={(e) => setTitle(e.target.value)}
                    placeholder="e.g., AUDIT SCHEDULE FOR 15TH JUNE 2026"
                  />
                </div>

                <div className={styles.formGroup}>
                  <label className={styles.label}>Client Group</label>
                  <Select<SelectOption>
                    classNamePrefix="rselect"
                    options={CLIENT_GROUP_OPTIONS}
                    value={
                      CLIENT_GROUP_OPTIONS.find(
                        (o) => o.value === clientGroup,
                      ) ?? null
                    }
                    onChange={(opt) =>
                      setClientGroup(
                        (opt?.value as "QRS" | "IICC") ?? "QRS",
                      )
                    }
                    isSearchable={false}
                    placeholder="Select group..."
                  />
                </div>

                <div className={styles.formGroup}>
                  <label className={`${styles.label} ${styles.labelRequired}`}>
                    Coordinator
                  </label>
                  <Select<SelectOption>
                    classNamePrefix="rselect"
                    options={users.map((u) => ({
                      value: u.id,
                      label: `${u.firstName} ${u.lastName} (${u.email})`,
                    }))}
                    value={
                      coordinatorId
                        ? {
                            value: coordinatorId,
                            label: (() => {
                              const u = users.find(
                                (x) => x.id === coordinatorId,
                              );
                              return u
                                ? `${u.firstName} ${u.lastName} (${u.email})`
                                : `User #${coordinatorId}`;
                            })(),
                          }
                        : null
                    }
                    onChange={(opt) =>
                      setCoordinatorId(opt ? Number(opt.value) : null)
                    }
                    placeholder="Pick coordinator..."
                  />
                </div>

                <div className={`${styles.formGroup} ${styles.full}`}>
                  <label className={styles.label}>Source Email</label>
                  <input
                    type="email"
                    className={styles.input}
                    value={sourceEmail}
                    onChange={(e) => setSourceEmail(e.target.value)}
                    placeholder="coordinator@qrs.ae"
                  />
                </div>

                <div className={`${styles.formGroup} ${styles.full}`}>
                  <label className={styles.label}>Schedule Notes</label>
                  <textarea
                    className={styles.textarea}
                    rows={2}
                    value={notes}
                    onChange={(e) => setNotes(e.target.value)}
                    placeholder="Optional notes about this schedule"
                  />
                </div>
              </div>

              {/* ══ Audit Rows (create-only) ════════════════════════════ */}
              {!isEdit && (
                <>
                  <div
                    className={styles.sectionHeader}
                    style={{
                      display: "flex",
                      justifyContent: "space-between",
                      alignItems: "center",
                    }}
                  >
                    <div>
                      <span className={styles.sectionDot}></span>
                      Audit Rows ({rows.length})
                    </div>
                    <button
                      type="button"
                      onClick={addRow}
                      style={{
                        display: "inline-flex",
                        alignItems: "center",
                        gap: 6,
                        padding: "6px 14px",
                        background:
                          "linear-gradient(135deg,#10b981,#059669)",
                        color: "#fff",
                        border: "none",
                        borderRadius: 8,
                        fontSize: 13,
                        fontWeight: 700,
                        cursor: "pointer",
                        textTransform: "none",
                      }}
                    >
                      <Plus size={14} /> Add Row
                    </button>
                  </div>

                  {rows.map((row, idx) => (
                    <RowEditor
                      key={idx}
                      index={idx}
                      row={row}
                      users={users}
                      standards={standards}
                      canRemove={rows.length > 1}
                      onUpdate={(patch) => updateRow(idx, patch)}
                      onRemove={() => removeRow(idx)}
                      searchCompanies={searchCompanies}
                    />
                  ))}
                </>
              )}

              {isEdit && (
                <div
                  style={{
                    marginTop: 16,
                    padding: 12,
                    background: "#eff6ff",
                    border: "1px solid #bfdbfe",
                    color: "#1e40af",
                    borderRadius: 8,
                    fontSize: 13,
                  }}
                >
                  ℹ️ To add, cancel or reschedule individual audit rows, use
                  the row actions in the expanded view of the table.
                </div>
              )}
            </div>

            <div className={styles.modalFooter}>
              <button
                type="button"
                className={styles.cancelBtn}
                onClick={onClose}
                disabled={submitting}
              >
                Cancel
              </button>
              <button
                type="submit"
                className={styles.saveBtn}
                disabled={submitting}
              >
                {submitting
                  ? "Saving..."
                  : isEdit
                    ? "💾 Save Changes"
                    : "＋ Create Schedule (DRAFT)"}
              </button>
            </div>
          </form>
        )}
      </div>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════════════════
// RowEditor sub-component
// ═════════════════════════════════════════════════════════════════════════
function RowEditor({
  index,
  row,
  users,
  standards,
  canRemove,
  onUpdate,
  onRemove,
  searchCompanies,
}: {
  index: number;
  row: CreateAuditRowDto;
  users: UserOpt[];
  standards: StandardOpt[];
  canRemove: boolean;
  onUpdate: (patch: Partial<CreateAuditRowDto>) => void;
  onRemove: () => void;
  searchCompanies: (q: string) => Promise<SelectOption[]>;
}) {
  return (
    <div
      style={{
        padding: 16,
        background: "#f8fafc",
        border: "1px solid #e2e8f0",
        borderRadius: 10,
        marginBottom: 12,
      }}
    >
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          marginBottom: 12,
          paddingBottom: 8,
          borderBottom: "1px solid #e2e8f0",
        }}
      >
        <div
          style={{
            fontWeight: 700,
            color: "#0f172a",
            fontSize: 13,
            background: "#fff",
            padding: "4px 10px",
            borderRadius: 6,
            border: "1px solid #e2e8f0",
          }}
        >
          Row #{index + 1}
        </div>
        {canRemove && (
          <button
            type="button"
            onClick={onRemove}
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: 4,
              background: "#fef2f2",
              border: "1px solid #fca5a5",
              color: "#b91c1c",
              padding: "4px 10px",
              borderRadius: 6,
              fontSize: 12,
              fontWeight: 600,
              cursor: "pointer",
            }}
          >
            <Trash2 size={12} /> Remove
          </button>
        )}
      </div>

      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(2, 1fr)",
          gap: 12,
        }}
      >
        {/* Audit Type */}
        <div>
          <label style={miniLabel}>
            Audit Type <span style={{ color: "#ef4444" }}>*</span>
          </label>
          <select
            style={miniInput}
            value={row.audit_type}
            onChange={(e) =>
              onUpdate({ audit_type: e.target.value as AuditType })
            }
          >
            {AUDIT_TYPES.map((t) => (
              <option key={t.value} value={t.value}>
                {t.label}
              </option>
            ))}
          </select>
        </div>

        {/* Stage */}
        <div>
          <label style={miniLabel}>Stage</label>
          <input
            type="text"
            style={miniInput}
            value={row.audit_stage ?? ""}
            onChange={(e) => onUpdate({ audit_stage: e.target.value })}
            placeholder="Stage 1 (optional)"
          />
        </div>

        {/* Mode */}
        <div>
          <label style={miniLabel}>Mode</label>
          <select
            style={miniInput}
            value={row.audit_mode}
            onChange={(e) =>
              onUpdate({ audit_mode: e.target.value as AuditMode })
            }
          >
            {AUDIT_MODES.map((m) => (
              <option key={m.value} value={m.value}>
                {m.label}
              </option>
            ))}
          </select>
        </div>

        {/* Accreditation */}
        <div>
          <label style={miniLabel}>Accreditation</label>
          <input
            type="text"
            style={miniInput}
            value={row.accreditation ?? ""}
            onChange={(e) => onUpdate({ accreditation: e.target.value })}
            placeholder="e.g., ASCB"
          />
        </div>

        {/* Company - async, full width */}
        <div style={{ gridColumn: "1 / -1" }}>
          <label style={miniLabel}>
            Company <span style={{ color: "#ef4444" }}>*</span>
          </label>
          <AsyncSelect<SelectOption>
            classNamePrefix="rselect"
            cacheOptions
            loadOptions={searchCompanies}
            value={
              row.company_id
                ? {
                    value: row.company_id,
                    label: `Company #${row.company_id}`,
                  }
                : null
            }
            onChange={(opt) =>
              onUpdate({ company_id: opt ? Number(opt.value) : 0 })
            }
            placeholder="Type to search companies..."
            noOptionsMessage={({ inputValue }) =>
              inputValue.length < 2
                ? "Type at least 2 characters"
                : "No companies found"
            }
          />
        </div>

        {/* Auditor */}
        <div>
          <label style={miniLabel}>
            Lead Auditor <span style={{ color: "#ef4444" }}>*</span>
          </label>
          <Select<SelectOption>
            classNamePrefix="rselect"
            options={users.map((u) => ({
              value: u.id,
              label: `${u.firstName} ${u.lastName}`,
            }))}
            value={
              row.lead_auditor_id
                ? {
                    value: row.lead_auditor_id,
                    label: (() => {
                      const u = users.find(
                        (x) => x.id === row.lead_auditor_id,
                      );
                      return u
                        ? `${u.firstName} ${u.lastName}`
                        : `User #${row.lead_auditor_id}`;
                    })(),
                  }
                : null
            }
            onChange={(opt) => {
              const leadId = opt ? Number(opt.value) : 0;
              onUpdate({
                lead_auditor_id: leadId,
                co_auditor_ids: (row.co_auditor_ids ?? []).filter(
                  (id) => id !== leadId,
                ),
              });
            }}
            placeholder="Pick auditor..."
          />
        </div>
{/* 🆕 Additional Auditors (Auditor 2, 3, ...) */}
        <div>
          <label style={miniLabel}>Additional Auditors</label>
          <Select<SelectOption, true>
            classNamePrefix="rselect"
            isMulti
            options={users
              .filter((u) => u.id !== row.lead_auditor_id) // lead can't be co-auditor
              .map((u) => ({
                value: u.id,
                label: `${u.firstName} ${u.lastName}`,
              }))}
            value={(row.co_auditor_ids ?? []).map((id) => {
              const u = users.find((x) => x.id === id);
              return {
                value: id,
                label: u ? `${u.firstName} ${u.lastName}` : `User #${id}`,
              };
            })}
            onChange={(opts) =>
              onUpdate({
                co_auditor_ids: opts ? opts.map((o) => Number(o.value)) : [],
              })
            }
            placeholder="Optional — Auditor 2..."
            closeMenuOnSelect={false}
          />
        </div>
      
        {/* Time — native clock picker */}
        <div>
          <label style={miniLabel}>Time</label>
          <input
            type="time"
            style={miniInput}
            value={toTimeInput(row.audit_time ?? "09:00:00")}
            onChange={(e) => {
              const dbTime = toDbTime(e.target.value);
              // Build a readable label from the picked time, e.g. "09.30AM"
              const [hh, mm] = dbTime.split(":").map((v) => parseInt(v, 10) || 0);
              const period = hh >= 12 ? "PM" : "AM";
              const hour12 = hh % 12 === 0 ? 12 : hh % 12;
              const label = `${String(hour12).padStart(2, "0")}.${String(mm).padStart(2, "0")}${period}`;
              onUpdate({ audit_time: dbTime, audit_time_label: label });
            }}
          />
        </div>

        {/* Standards multi - full width */}
        <div style={{ gridColumn: "1 / -1" }}>
          <label style={miniLabel}>
            Standards <span style={{ color: "#ef4444" }}>*</span>
          </label>
          <Select<SelectOption, true>
            classNamePrefix="rselect"
            isMulti
            options={standards.map((s) => ({
              value: s.id,
              label: s.name,
            }))}
            value={(row.standard_ids ?? []).map((id) => ({
              value: id,
              label: standards.find((s) => s.id === id)?.name ?? `#${id}`,
            }))}
            onChange={(opts) =>
              onUpdate({
                standard_ids: opts ? opts.map((o) => Number(o.value)) : [],
              })
            }
            placeholder="Select standards..."
            closeMenuOnSelect={false}
          />
        </div>

        {/* Row notes - full width */}
        <div style={{ gridColumn: "1 / -1" }}>
          <label style={miniLabel}>Row Notes</label>
          <input
            type="text"
            style={miniInput}
            value={row.notes ?? ""}
            onChange={(e) => onUpdate({ notes: e.target.value })}
            placeholder="Optional notes about this specific audit"
          />
        </div>
      </div>
    </div>
  );
}

const miniLabel: React.CSSProperties = {
  display: "block",
  fontSize: 12,
  fontWeight: 600,
  color: "#475569",
  marginBottom: 4,
  textTransform: "uppercase",
  letterSpacing: 0.3,
};
const miniInput: React.CSSProperties = {
  width: "100%",
  padding: "8px 12px",
  fontSize: 13,
  border: "1px solid #cbd5e1",
  borderRadius: 6,
  background: "#fff",
  outline: "none",
};