// YamlValidator screen — sequential-schedule YAML validation with schema
// selection and JSON output preview.
(function () {
  const NS = window.ChicoryTVDesignSystem_eb3b61;
  const { Button, Card, Switch } = NS;
  const Ico = window.Ico;
  const mono = { fontFamily: "var(--font-mono)", fontVariantNumeric: "tabular-nums" };

  const mockYaml = `content:
  - movie: "/path/to/movie1.mkv"
  - collection: "80s Hits"
  - movie: "/path/to/movie2.mkv"
  - show: "Newsroom"
    episode: 1
    season: 1`;

  const mockMessages = [
    "Show 'Newsroom' not found in library — skipping",
    "Collection '80s Hits' is empty",
  ];

  const mockJson = `{
  "content": [
    {
      "movie": "/path/to/movie1.mkv",
      "startTime": "00:00:00"
    },
    {
      "collection": "80s Hits",
      "startTime": "02:15:30"
    },
    {
      "movie": "/path/to/movie2.mkv",
      "startTime": "02:15:30"
    }
  ]
}`;

  function YamlValidator() {
    const [isImport, setIsImport] = React.useState(false);
    const [showResult, setShowResult] = React.useState(true);

    return (
      <div style={{ display: "flex", flexDirection: "column", height: "100%", overflow: "auto" }}>
        <div style={{ padding: "16px 20px" }}>
          {/* Input Card */}
          <Card
            padded
            title="Sequential Schedule Validation"
            subtitle="Paste a sequential-schedule YAML document to validate it against the schema"
          >
            <label style={{ display: "block", marginBottom: 16 }}>
              <span style={{
                display: "block",
                marginBottom: 8,
                font: "var(--weight-medium) var(--text-sm)/1.3 var(--font-sans)",
                color: "var(--text-primary)"
              }}>
                YAML
              </span>
              <textarea
                value={mockYaml}
                readOnly
                spellCheck={false}
                rows={16}
                style={{
                  width: "100%",
                  padding: "12px 16px",
                  fontFamily: "var(--font-mono)",
                  fontSize: "var(--text-sm)",
                  lineHeight: 1.5,
                  color: "var(--text-primary)",
                  background: "var(--ctv-bg-sunken)",
                  border: "1px solid var(--border-control)",
                  borderRadius: "var(--radius-md)",
                  resize: "vertical",
                  minHeight: 240
                }}
              />
            </label>

            {/* Action Bar */}
            <div style={{
              display: "flex",
              alignItems: "center",
              gap: 16,
              marginTop: 16
            }}>
              <Switch
                checked={isImport}
                onChange={setIsImport}
                label="Import schema"
              />
              <span style={{ flex: 1 }} />
              <Button
                variant="primary"
                startIcon={<Ico n="ListChecks" s={14} />}
                onClick={() => setShowResult(!showResult)}
              >
                Validate
              </Button>
            </div>
          </Card>
        </div>

        {/* Validation Result */}
        {showResult && (
          <div style={{ padding: "0 20px 16px 20px" }}>
            {/* Messages Card */}
            <Card
              padded
              title={
                <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
                  <Ico n="TriangleAlert" s={16} color="var(--status-error)" />
                  {mockMessages.length} validation message{mockMessages.length === 1 ? "" : "s"}
                </span>
              }
              style={{ marginBottom: 16 }}
            >
              <ul style={{
                listStyle: "none",
                margin: 0,
                padding: 0,
                display: "flex",
                flexDirection: "column",
                gap: 8
              }}>
                {mockMessages.map((msg, idx) => (
                  <li
                    key={idx}
                    style={{
                      padding: "8px 0",
                      font: "var(--text-sm)/1.5 var(--font-sans)",
                      color: "var(--status-error)"
                    }}
                  >
                    {msg}
                  </li>
                ))}
              </ul>
            </Card>

            {/* JSON Output Card */}
            <Card
              padded
              title="JSON"
              subtitle="YAML converted to JSON"
            >
              <pre style={{
                margin: 0,
                padding: "12px 16px",
                background: "var(--ctv-bg-sunken)",
                border: "1px solid var(--border-control)",
                borderRadius: "var(--radius-md)",
                overflow: "auto",
                maxHeight: 300
              }}>
                <code style={{
                  font: "var(--text-sm)/1.6 var(--font-mono)",
                  color: "var(--text-secondary)",
                  whiteSpace: "pre"
                }}>
                  {mockJson}
                </code>
              </pre>
            </Card>
          </div>
        )}
      </div>
    );
  }

  window.CTVYamlValidator = YamlValidator;
})();
