"use client";

import React from "react";
import type { WarehouseRecord } from "@/lib/api";
import WarehouseMultiSelect from "./WarehouseMultiSelect";

/**
 * SheetHeaderForm Component
 *
 * Displays and manages sheet-level metadata fields in the Stock Movement Sheet modal.
 * Features auto-populated serial number (read-only) and entry date (editable),
 * plus integrated warehouse multi-select dropdown.
 *
 * Design matches the premium patterns from WarehouseEntryModal.
 */

// Brand colors matching WarehouseEntryModal
const BRAND = "#4c6fff";

interface SheetHeaderFormProps {
  serialNumber: string;  // Read-only, auto-generated
  entryDate: string;     // Editable, defaults to today
  onDateChange: (date: string) => void;
  selectedWarehouses: string[];
  onWarehousesChange: (warehouseIds: string[]) => void;
  warehouses: WarehouseRecord[];
}

export default function SheetHeaderForm({
  serialNumber,
  entryDate,
  onDateChange,
  selectedWarehouses,
  onWarehousesChange,
  warehouses,
}: SheetHeaderFormProps) {
  return (
    <div
      style={{
        position: "sticky",
        top: 0,
        zIndex: 10,
        background: "#fff",
        borderBottom: "1px solid rgba(0,0,0,0.07)",
        padding: "20px 26px",
      }}
    >
      {/* Header Title */}
      <div style={{ marginBottom: 18 }}>
        <h3
          style={{
            margin: 0,
            fontSize: "1.1rem",
            fontWeight: 700,
            color: "#1a202c",
            letterSpacing: "-0.02em",
          }}
        >
          Sheet Information
        </h3>
        <p
          style={{
            margin: "4px 0 0",
            fontSize: "0.82rem",
            color: "#868e96",
          }}
        >
          Auto-generated serial number and entry details
        </p>
      </div>

      {/* Form Grid */}
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 16,
        }}
      >
        {/* Serial Number (Read-only) */}
        <div>
          <label
            style={{
              display: "block",
              fontSize: "0.8rem",
              fontWeight: 600,
              color: "#495057",
              marginBottom: 8,
              textTransform: "uppercase",
              letterSpacing: "0.05em",
            }}
          >
            Serial Number
          </label>
          <div
            style={{
              padding: "11px 16px",
              borderRadius: 8,
              border: `1.5px solid rgba(76, 111, 255, 0.25)`,
              background: "rgba(76, 111, 255, 0.04)",
              fontSize: "0.92rem",
              fontWeight: 700,
              color: BRAND,
              display: "flex",
              alignItems: "center",
              gap: 10,
            }}
          >
            {/* Document icon */}
            <svg
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              stroke={BRAND}
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
              <polyline points="14 2 14 8 20 8" />
              <line x1="16" y1="13" x2="8" y2="13" />
              <line x1="16" y1="17" x2="8" y2="17" />
              <polyline points="10 9 9 9 8 9" />
            </svg>
            <span>{serialNumber}</span>
          </div>
        </div>

        {/* Entry Date (Editable) */}
        <div>
          <label
            htmlFor="entry-date"
            style={{
              display: "block",
              fontSize: "0.8rem",
              fontWeight: 600,
              color: "#495057",
              marginBottom: 8,
              textTransform: "uppercase",
              letterSpacing: "0.05em",
            }}
          >
            Entry Date
          </label>
          <input
            id="entry-date"
            type="date"
            value={entryDate}
            onChange={(e) => onDateChange(e.target.value)}
            style={{
              width: "100%",
              padding: "11px 16px",
              borderRadius: 8,
              border: "1.5px solid rgba(0,0,0,0.12)",
              background: "#fff",
              fontSize: "0.88rem",
              fontWeight: 600,
              color: "#1a202c",
              outline: "none",
              fontFamily: "inherit",
              boxSizing: "border-box",
              transition: "border-color 0.15s ease",
            }}
            onFocus={(e) => {
              e.target.style.borderColor = BRAND;
            }}
            onBlur={(e) => {
              e.target.style.borderColor = "rgba(0,0,0,0.12)";
            }}
          />
        </div>
      </div>

      {/* Warehouse Multi-Select (Full Width) */}
      <div style={{ marginTop: 16 }}>
        <label
          style={{
            display: "block",
            fontSize: "0.8rem",
            fontWeight: 600,
            color: "#495057",
            marginBottom: 8,
            textTransform: "uppercase",
            letterSpacing: "0.05em",
          }}
        >
          Warehouses
        </label>
        <WarehouseMultiSelect
          warehouses={warehouses}
          selected={selectedWarehouses}
          onChange={onWarehousesChange}
        />
      </div>
    </div>
  );
}