"use client";

import React, { FormEvent, useState } from "react";
import type { ProjectDto } from "../types";
import {
  distributionBoardSupplyTypeLabels,
  distributionBoardSupplyTypes,
  type DistributionBoardSupplyType,
} from "../../shared/constants/distribution-board";
import {
  projectCoverFieldLabels,
  projectCoverFieldMaxLengths,
  projectCoverFields,
  type ProjectCoverField,
} from "../../shared/constants/project-cover";
import { FormModal } from "./form-modal";

export interface ProjectSettingsInput
  extends Record<ProjectCoverField, string | null> {
  name: string;
  internalProjectNumber: string | null;
  externalProjectNumber: string | null;
  buildingOwner: string | null;
  description: string | null;
  isPublicBuilding: boolean;
  singlePhaseVoltageV: number;
  threePhaseVoltageV: number;
  enabledDistributionBoardSupplyTypes: DistributionBoardSupplyType[];
}

const coverFieldPlaceholders: Record<ProjectCoverField, string> = {
  siteAddress: "Straße Nr.\nPLZ Ort",
  workStage: "z. B. LPH 5 – Ausführungsplanung",
  projectLead: "",
  projectEditor: "",
};

interface ProjectSettingsModalProps {
  isSaving: boolean;
  onClose: () => void;
  onExport: () => Promise<void>;
  onImport: (
    transfer: unknown,
    mode: "replace" | "duplicate"
  ) => Promise<void>;
  onSave: (input: ProjectSettingsInput) => Promise<void>;
  project: ProjectDto;
  usedDistributionBoardSupplyTypes: DistributionBoardSupplyType[];
}

export function ProjectSettingsModal({
  isSaving,
  onClose,
  onExport,
  onImport,
  onSave,
  project,
  usedDistributionBoardSupplyTypes,
}: ProjectSettingsModalProps) {
  const [name, setName] = useState(project.name);
  const [internalProjectNumber, setInternalProjectNumber] = useState(
    project.internalProjectNumber ?? ""
  );
  const [externalProjectNumber, setExternalProjectNumber] = useState(
    project.externalProjectNumber ?? ""
  );
  const [buildingOwner, setBuildingOwner] = useState(
    project.buildingOwner ?? ""
  );
  const [description, setDescription] = useState(
    project.description ?? ""
  );
  const [isPublicBuilding, setIsPublicBuilding] = useState(
    project.isPublicBuilding
  );
  const [singlePhaseVoltageV, setSinglePhaseVoltageV] = useState(
    String(project.singlePhaseVoltageV)
  );
  const [threePhaseVoltageV, setThreePhaseVoltageV] = useState(
    String(project.threePhaseVoltageV)
  );
  const [
    enabledDistributionBoardSupplyTypes,
    setEnabledDistributionBoardSupplyTypes,
  ] = useState<DistributionBoardSupplyType[]>(
    project.enabledDistributionBoardSupplyTypes
  );
  const [coverValues, setCoverValues] = useState<
    Record<ProjectCoverField, string>
  >({
    siteAddress: project.siteAddress ?? "",
    workStage: project.workStage ?? "",
    projectLead: project.projectLead ?? "",
    projectEditor: project.projectEditor ?? "",
  });
  const [transfer, setTransfer] = useState<unknown>(null);
  const [transferFilename, setTransferFilename] = useState("");
  const [importMode, setImportMode] = useState<"replace" | "duplicate">(
    "duplicate"
  );
  const [replaceConfirmed, setReplaceConfirmed] = useState(false);
  const [fileError, setFileError] = useState<string | null>(null);

  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    await onSave({
      name: name.trim(),
      internalProjectNumber: toNullableString(internalProjectNumber),
      externalProjectNumber: toNullableString(externalProjectNumber),
      buildingOwner: toNullableString(buildingOwner),
      description: toNullableString(description),
      isPublicBuilding,
      singlePhaseVoltageV: Number(singlePhaseVoltageV),
      threePhaseVoltageV: Number(threePhaseVoltageV),
      enabledDistributionBoardSupplyTypes,
      siteAddress: toNullableString(coverValues.siteAddress),
      workStage: toNullableString(coverValues.workStage),
      projectLead: toNullableString(coverValues.projectLead),
      projectEditor: toNullableString(coverValues.projectEditor),
    });
  }

  const isValid =
    name.trim().length > 0 &&
    Number(singlePhaseVoltageV) > 0 &&
    Number(threePhaseVoltageV) > 0 &&
    enabledDistributionBoardSupplyTypes.length > 0;

  function toggleSupplyType(supplyType: DistributionBoardSupplyType) {
    if (
      enabledDistributionBoardSupplyTypes.includes(supplyType) &&
      usedDistributionBoardSupplyTypes.includes(supplyType)
    ) {
      return;
    }
    setEnabledDistributionBoardSupplyTypes((current) =>
      current.includes(supplyType)
        ? current.filter((entry) => entry !== supplyType)
        : distributionBoardSupplyTypes.filter(
            (entry) => entry === supplyType || current.includes(entry)
          )
    );
  }

  async function handleTransferFile(file: File | undefined) {
    setTransfer(null);
    setTransferFilename("");
    setFileError(null);
    if (!file) {
      return;
    }
    try {
      setTransfer(JSON.parse(await file.text()) as unknown);
      setTransferFilename(file.name);
    } catch {
      setFileError("Die ausgewählte Datei enthält kein gültiges JSON.");
    }
  }

  return (
    <FormModal
      description="Stammdaten und elektrische Standardwerte des Projekts"
      isSaving={isSaving}
      onClose={onClose}
      onSubmit={handleSubmit}
      submitDisabled={!isValid}
      submitLabel="Einstellungen speichern"
      title="Projekteinstellungen"
    >
      <div className="row g-3">
        <div className="col-12">
          <label className="form-label" htmlFor="project-name">
            Projektname
          </label>
          <input
            autoFocus
            className="form-control"
            id="project-name"
            maxLength={200}
            onChange={(event) => setName(event.target.value)}
            required
            value={name}
          />
        </div>
        <div className="col-12 col-md-6">
          <label className="form-label" htmlFor="internal-project-number">
            Projektnummer intern
          </label>
          <input
            className="form-control"
            id="internal-project-number"
            maxLength={100}
            onChange={(event) =>
              setInternalProjectNumber(event.target.value)
            }
            value={internalProjectNumber}
          />
        </div>
        <div className="col-12 col-md-6">
          <label className="form-label" htmlFor="external-project-number">
            Projektnummer extern
          </label>
          <input
            className="form-control"
            id="external-project-number"
            maxLength={100}
            onChange={(event) =>
              setExternalProjectNumber(event.target.value)
            }
            value={externalProjectNumber}
          />
        </div>
        <div className="col-12">
          <fieldset>
            <legend className="form-label mb-1">
              Verwendete Netzarten
            </legend>
            <p className="form-text mt-0">
              Nur ausgewählte Netzarten stehen bei Verteilungen zur
              Auswahl. Bereits verwendete Netzarten können nicht
              deaktiviert werden.
            </p>
            <div className="row g-2">
              {distributionBoardSupplyTypes.map((supplyType) => (
                <div
                  className="col-12 col-md-6"
                  key={supplyType}
                >
                  <label className="form-check">
                    <input
                      checked={enabledDistributionBoardSupplyTypes.includes(
                        supplyType
                      )}
                      className="form-check-input"
                      disabled={usedDistributionBoardSupplyTypes.includes(
                        supplyType
                      )}
                      onChange={() => toggleSupplyType(supplyType)}
                      type="checkbox"
                    />
                    <span className="form-check-label">
                      {distributionBoardSupplyTypeLabels[supplyType]}
                      {usedDistributionBoardSupplyTypes.includes(
                        supplyType
                      )
                        ? " (in Verwendung)"
                        : ""}
                    </span>
                  </label>
                </div>
              ))}
            </div>
            {enabledDistributionBoardSupplyTypes.length === 0 ? (
              <div className="text-danger small mt-2">
                Mindestens eine Netzart muss aktiviert sein.
              </div>
            ) : null}
          </fieldset>
        </div>
        <div className="col-12">
          <label className="form-label" htmlFor="building-owner">
            Bauherr
          </label>
          <input
            className="form-control"
            id="building-owner"
            maxLength={200}
            onChange={(event) => setBuildingOwner(event.target.value)}
            value={buildingOwner}
          />
        </div>
        <div className="col-12">
          <label className="form-label" htmlFor="project-description">
            Beschreibung
          </label>
          <textarea
            className="form-control"
            id="project-description"
            maxLength={2000}
            onChange={(event) => setDescription(event.target.value)}
            rows={4}
            value={description}
          />
        </div>
        <div className="col-12">
          <label className="form-check">
            <input
              checked={isPublicBuilding}
              className="form-check-input"
              id="public-building"
              onChange={(event) =>
                setIsPublicBuilding(event.target.checked)
              }
              type="checkbox"
            />
            <span className="form-check-label">
              Öffentliches Gebäude
            </span>
          </label>
          <div className="form-text ms-4">
            Wird bei der späteren Leitungsauslegung berücksichtigt,
            insbesondere bei der Auswahl halogenfreier Kabel und
            Leitungen.
          </div>
        </div>
        <div className="col-12 col-md-6">
          <label className="form-label" htmlFor="single-phase-voltage">
            Standardspannung 1-phasig [V]
          </label>
          <input
            className="form-control"
            id="single-phase-voltage"
            min="1"
            onChange={(event) =>
              setSinglePhaseVoltageV(event.target.value)
            }
            required
            type="number"
            value={singlePhaseVoltageV}
          />
        </div>
        <div className="col-12 col-md-6">
          <label className="form-label" htmlFor="three-phase-voltage">
            Standardspannung 3-phasig [V]
          </label>
          <input
            className="form-control"
            id="three-phase-voltage"
            min="1"
            onChange={(event) =>
              setThreePhaseVoltageV(event.target.value)
            }
            required
            type="number"
            value={threePhaseVoltageV}
          />
        </div>
        <div className="col-12">
          <hr className="my-2" />
          <h3 className="h6">Deckblatt</h3>
          <p className="text-secondary small">
            Angaben für das Deckblatt der Seitenansicht. Büroname und
            Büroanschrift werden projektübergreifend in der Seitenansicht
            gepflegt.
          </p>
          <div className="row g-3">
            {projectCoverFields.map((field) => (
              <div
                className={field === "siteAddress" ? "col-12" : "col-12 col-md-6"}
                key={field}
              >
                <label className="form-label" htmlFor={`project-cover-${field}`}>
                  {projectCoverFieldLabels[field]}
                </label>
                {field === "siteAddress" ? (
                  <textarea
                    className="form-control"
                    id={`project-cover-${field}`}
                    maxLength={projectCoverFieldMaxLengths[field]}
                    onChange={(event) =>
                      setCoverValues((current) => ({
                        ...current,
                        [field]: event.target.value,
                      }))
                    }
                    placeholder={coverFieldPlaceholders[field]}
                    rows={2}
                    value={coverValues[field]}
                  />
                ) : (
                  <input
                    className="form-control"
                    id={`project-cover-${field}`}
                    maxLength={projectCoverFieldMaxLengths[field]}
                    onChange={(event) =>
                      setCoverValues((current) => ({
                        ...current,
                        [field]: event.target.value,
                      }))
                    }
                    placeholder={coverFieldPlaceholders[field]}
                    value={coverValues[field]}
                  />
                )}
              </div>
            ))}
          </div>
        </div>
        <div className="col-12">
          <hr className="my-2" />
          <h3 className="h6">Projekt importieren oder exportieren</h3>
          <p className="text-secondary small">
            Der Export enthält den vollständigen unterstützten
            Projektzustand. Beim Duplizieren bleibt dieses Projekt
            unverändert.
          </p>
          <button
            className="btn btn-outline-primary mb-3"
            disabled={isSaving}
            onClick={() => void onExport()}
            type="button"
          >
            Projektdatei herunterladen
          </button>
          <label className="form-label d-block" htmlFor="project-import">
            Projektdatei auswählen
          </label>
          <input
            accept=".json,application/json"
            className="form-control"
            id="project-import"
            onChange={(event) =>
              void handleTransferFile(event.target.files?.[0])
            }
            type="file"
          />
          {transferFilename ? (
            <div className="form-text">{transferFilename} ist bereit.</div>
          ) : null}
          {fileError ? (
            <div className="text-danger small mt-1">{fileError}</div>
          ) : null}
          <div className="d-flex flex-wrap gap-3 mt-3">
            <label className="form-check">
              <input
                checked={importMode === "duplicate"}
                className="form-check-input"
                name="import-mode"
                onChange={() => setImportMode("duplicate")}
                type="radio"
              />
              <span className="form-check-label">
                Als neues Projekt duplizieren
              </span>
            </label>
            <label className="form-check">
              <input
                checked={importMode === "replace"}
                className="form-check-input"
                name="import-mode"
                onChange={() => setImportMode("replace")}
                type="radio"
              />
              <span className="form-check-label">
                Dieses Projekt ersetzen
              </span>
            </label>
          </div>
          {importMode === "replace" ? (
            <label className="form-check mt-2">
              <input
                checked={replaceConfirmed}
                className="form-check-input"
                onChange={(event) =>
                  setReplaceConfirmed(event.target.checked)
                }
                type="checkbox"
              />
              <span className="form-check-label text-danger">
                Ich bestätige, dass der aktuelle Projektstand ersetzt
                wird.
              </span>
            </label>
          ) : null}
          <button
            className="btn btn-outline-danger mt-3"
            disabled={
              isSaving ||
              transfer === null ||
              (importMode === "replace" && !replaceConfirmed)
            }
            onClick={() =>
              transfer === null
                ? undefined
                : void onImport(transfer, importMode)
            }
            type="button"
          >
            Projektdatei importieren
          </button>
        </div>
      </div>
    </FormModal>
  );
}

function toNullableString(value: string) {
  return value.trim() || null;
}