import React, { useEffect, useState } from 'react';
import { ScrollArea } from '../../ui/scroll-area';
import { Input } from '../../ui/input';
import { Button } from '../../ui/button';
import { Label } from '../../ui/label';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '../../ui/select';
import { Switch } from '../../ui/switch';
import type {
  LabelTemplate,
  LabelElement,
  LabelType,
  Unit,
  Rotation,
  Border,
  AppliedLocation,
} from '../../../types/labelTemplate';
import type { LocationDto } from '../../../types/location';
import type { LabelMultipleOptionDto } from '../../../types/labelMultipleOption';
import { getLabelMultipleOptions } from '../../../services/labelMultipleOptionService';
import { Checkbox } from '../../ui/checkbox';
import { Trash2 } from 'lucide-react';

interface PropertiesPanelProps {
  template: LabelTemplate;
  selectedElement: LabelElement | null;
  onTemplateChange: (patch: Partial<LabelTemplate>) => void;
  onElementChange: (id: string, patch: Partial<LabelElement>) => void;
  onDeleteElement?: (id: string) => void;
  /** 门店列表：appliedLocation=SPECIFIED 时勾选 */
  locations?: LocationDto[];
  /** 编辑已有模板时禁止修改 Template Code */
  readOnlyTemplateCode?: boolean;
}

export function PropertiesPanel({
  template,
  selectedElement,
  onTemplateChange,
  onElementChange,
  onDeleteElement,
  locations = [],
  readOnlyTemplateCode = false,
}: PropertiesPanelProps) {
  if (selectedElement) {
    return (
      <div className="w-72 shrink-0 border-l border-gray-200 bg-white flex flex-col h-full">
        <div className="px-3 py-2 border-b border-gray-200 font-semibold text-gray-800">
          Properties (Element)
        </div>
        <ScrollArea className="flex-1">
          <div className="p-3 space-y-3">
            <div className="grid grid-cols-2 gap-2">
              <div>
                <Label className="text-xs">X</Label>
                <Input
                  type="number"
                  value={selectedElement.x}
                  onChange={(e) =>
                    onElementChange(selectedElement.id, {
                      x: Number(e.target.value) || 0,
                    })
                  }
                  className="h-8 text-sm"
                />
              </div>
              <div>
                <Label className="text-xs">Y</Label>
                <Input
                  type="number"
                  value={selectedElement.y}
                  onChange={(e) =>
                    onElementChange(selectedElement.id, {
                      y: Number(e.target.value) || 0,
                    })
                  }
                  className="h-8 text-sm"
                />
              </div>
            </div>
            <div className="grid grid-cols-2 gap-2">
              <div>
                <Label className="text-xs">Width</Label>
                <Input
                  type="number"
                  value={selectedElement.width}
                  onChange={(e) =>
                    onElementChange(selectedElement.id, {
                      width: Math.max(1, Number(e.target.value) || 0),
                    })
                  }
                  className="h-8 text-sm"
                />
              </div>
              <div>
                <Label className="text-xs">Height</Label>
                <Input
                  type="number"
                  value={selectedElement.height}
                  onChange={(e) =>
                    onElementChange(selectedElement.id, {
                      height: Math.max(1, Number(e.target.value) || 0),
                    })
                  }
                  className="h-8 text-sm"
                />
              </div>
            </div>
            <div>
              <Label className="text-xs">Rotation</Label>
              <Select
                value={selectedElement.rotation}
                onValueChange={(v: Rotation) =>
                  onElementChange(selectedElement.id, { rotation: v })
                }
              >
                <SelectTrigger className="h-8 text-sm">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="horizontal">horizontal</SelectItem>
                  <SelectItem value="vertical">vertical</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label className="text-xs">Border</Label>
              <Select
                value={selectedElement.border}
                onValueChange={(v: Border) =>
                  onElementChange(selectedElement.id, { border: v })
                }
              >
                <SelectTrigger className="h-8 text-sm">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="none">none</SelectItem>
                  <SelectItem value="line">line</SelectItem>
                  <SelectItem value="dotted">dotted</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label className="text-xs">Element name</Label>
              <Input
                value={(selectedElement.elementName ?? "").trim()}
                onChange={(e) =>
                  onElementChange(selectedElement.id, {
                    elementName: e.target.value,
                  })
                }
                className="h-8 text-sm mt-1"
                placeholder="e.g. text1"
              />
              <p className="text-[10px] text-gray-400 mt-1">
                Required for save; used as data-entry column header (elementName).
              </p>
            </div>
            <ElementConfigFields
              element={selectedElement}
              onChange={(config) =>
                onElementChange(selectedElement.id, { config: { ...selectedElement.config, ...config } })
              }
            />
            {onDeleteElement && (
              <div className="pt-4 border-t border-gray-100">
                <Button
                  variant="destructive"
                  className="w-full gap-2"
                  onClick={() => onDeleteElement(selectedElement.id)}
                >
                  <Trash2 className="h-4 w-4 shrink-0" />
                  Delete Element
                </Button>
              </div>
            )}
          </div>
        </ScrollArea>
      </div>
    );
  }

  return (
    <div className="w-72 shrink-0 border-l border-gray-200 bg-white flex flex-col h-full">
      <div className="px-3 py-2 border-b border-gray-200 font-semibold text-gray-800">
        Properties (Template)
      </div>
      <ScrollArea className="flex-1">
        <div className="p-3 space-y-3">
          <div>
            <Label className="text-xs">Template Code</Label>
            <Input
              value={template.id}
              disabled={readOnlyTemplateCode}
              onChange={(e) => onTemplateChange({ id: e.target.value.trim() })}
              className="h-8 text-sm mt-1"
              placeholder="e.g. TPL_TEST_001"
            />
          </div>
          <div>
            <Label className="text-xs">Template Name</Label>
            <Input
              value={template.name}
              onChange={(e) => onTemplateChange({ name: e.target.value })}
              className="h-8 text-sm mt-1"
            />
          </div>
          <div>
            <Label className="text-xs">Label Type</Label>
            <Select
              value={template.labelType}
              onValueChange={(v: LabelType) => onTemplateChange({ labelType: v })}
            >
              <SelectTrigger className="h-8 text-sm mt-1">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="PRICE">PRICE</SelectItem>
                <SelectItem value="NUTRITION">NUTRITION</SelectItem>
                <SelectItem value="SHIPPING">SHIPPING</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div>
            <Label className="text-xs">Applied Location</Label>
            <Select
              value={template.appliedLocation}
              onValueChange={(v: AppliedLocation) => {
                if (v === "ALL") {
                  onTemplateChange({ appliedLocation: v, appliedLocationIds: [] });
                } else {
                  onTemplateChange({ appliedLocation: v });
                }
              }}
            >
              <SelectTrigger className="h-8 text-sm mt-1">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="ALL">All locations</SelectItem>
                <SelectItem value="SPECIFIED">Specified locations</SelectItem>
              </SelectContent>
            </Select>
          </div>
          {template.appliedLocation === "SPECIFIED" && (
            <div className="rounded-md border border-gray-200 p-2 max-h-40 overflow-y-auto space-y-2">
              <Label className="text-xs text-gray-600">Select locations</Label>
              {locations.length === 0 ? (
                <p className="text-xs text-gray-500">No locations loaded.</p>
              ) : (
                locations.map((loc) => {
                  const checked = (template.appliedLocationIds ?? []).includes(loc.id);
                  return (
                    <label
                      key={loc.id}
                      className="flex items-center gap-2 text-xs cursor-pointer"
                    >
                      <Checkbox
                        checked={checked}
                        onCheckedChange={(v) => {
                          const on = v === true;
                          const cur = new Set(template.appliedLocationIds ?? []);
                          if (on) cur.add(loc.id);
                          else cur.delete(loc.id);
                          onTemplateChange({ appliedLocationIds: Array.from(cur) });
                        }}
                      />
                      <span className="truncate">
                        {(loc.locationName ?? loc.locationCode ?? loc.id).trim() || loc.id}
                      </span>
                    </label>
                  );
                })
              )}
            </div>
          )}
          <div className="grid grid-cols-2 gap-2">
            <div>
              <Label className="text-xs">Width</Label>
              <Input
                type="number"
                value={template.width}
                onChange={(e) =>
                  onTemplateChange({ width: Math.max(0.1, Number(e.target.value) || 0) })
                }
                className="h-8 text-sm"
              />
            </div>
            <div>
              <Label className="text-xs">Height</Label>
              <Input
                type="number"
                value={template.height}
                onChange={(e) =>
                  onTemplateChange({ height: Math.max(0.1, Number(e.target.value) || 0) })
                }
                className="h-8 text-sm"
              />
            </div>
          </div>
          <div>
            <Label className="text-xs">Unit</Label>
            <Select
              value={template.unit}
              onValueChange={(v: Unit) => onTemplateChange({ unit: v })}
            >
              <SelectTrigger className="h-8 text-sm mt-1">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="cm">cm</SelectItem>
                <SelectItem value="inch">inch</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div className="flex items-center gap-2">
            <Switch
              checked={template.showRuler}
              onCheckedChange={(v) => onTemplateChange({ showRuler: v })}
            />
            <Label className="text-xs">Show Ruler</Label>
          </div>
          <div className="flex items-center gap-2">
            <Switch
              checked={template.showGrid ?? true}
              onCheckedChange={(v) => onTemplateChange({ showGrid: v })}
            />
            <Label className="text-xs">Show Grid</Label>
          </div>
        </div>
      </ScrollArea>
    </div>
  );
}

const MULTIPLE_OPTION_NONE = '__none__';

/** 绑定「Multiple Options」页维护的字典：先选字典，再在该字典的值列表中多选 */
function MultipleOptionsDictionaryFields({
  cfg,
  onPatch,
}: {
  cfg: Record<string, unknown>;
  onPatch: (patch: Record<string, unknown>) => void;
}) {
  const [rows, setRows] = useState<LabelMultipleOptionDto[]>([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    let cancelled = false;
    setLoading(true);
    getLabelMultipleOptions({ skipCount: 1, maxResultCount: 500 })
      .then((res) => {
        if (!cancelled) setRows(res.items ?? []);
      })
      .catch(() => {
        if (!cancelled) setRows([]);
      })
      .finally(() => {
        if (!cancelled) setLoading(false);
      });
    return () => {
      cancelled = true;
    };
  }, []);

  const selectedId = ((cfg.multipleOptionId as string) ?? '').trim();
  const selectedVals = Array.isArray(cfg.selectedOptionValues)
    ? (cfg.selectedOptionValues as string[])
    : [];
  const active = rows.find((r) => r.id === selectedId);
  const valueList = active?.optionValuesJson ?? [];

  /** 从服务端拉到的字典列表就绪后，为已绑定 id 的旧模板补上 multipleOptionName，画布才能显示「名称:」前缀 */
  useEffect(() => {
    if (!selectedId || rows.length === 0) return;
    const row = rows.find((r) => r.id === selectedId);
    const name = String(row?.optionName ?? '').trim();
    if (!row || !name) return;
    const current = String(cfg.multipleOptionName ?? '').trim();
    if (name !== current) {
      onPatch({ multipleOptionName: name });
    }
  }, [selectedId, rows, cfg.multipleOptionName, onPatch]);

  const selectValue = selectedId ? selectedId : MULTIPLE_OPTION_NONE;

  return (
    <>
      <div>
        <Label className="text-xs">Option dictionary</Label>
        <Select
          value={selectValue}
          onValueChange={(id) => {
            if (id === MULTIPLE_OPTION_NONE) {
              onPatch({ multipleOptionId: '', multipleOptionName: '', selectedOptionValues: [] });
              return;
            }
            const next = rows.find((r) => r.id === id);
            const allowed = new Set(next?.optionValuesJson ?? []);
            const filtered = selectedVals.filter((v) => allowed.has(v));
            const optName = String(next?.optionName ?? next?.optionCode ?? '').trim();
            onPatch({
              multipleOptionId: id,
              multipleOptionName: optName,
              selectedOptionValues: filtered,
            });
          }}
          disabled={loading}
        >
          <SelectTrigger className="h-8 text-sm mt-1">
            <SelectValue placeholder={loading ? 'Loading…' : 'Select from Multiple Options'} />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value={MULTIPLE_OPTION_NONE}>— None —</SelectItem>
            {rows.map((o) => (
              <SelectItem key={o.id} value={o.id}>
                {(o.optionName ?? o.optionCode ?? o.id) as string}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
        <p className="text-[10px] text-gray-400 mt-1">
          Data comes from the Multiple Options tab (label-multiple-option list).
        </p>
      </div>
      {active && valueList.length > 0 ? (
        <div>
          <Label className="text-xs">Values (multi-select)</Label>
          <div className="mt-1 max-h-44 overflow-y-auto border border-gray-200 rounded-md p-2 space-y-2 bg-gray-50/50">
            {valueList.map((val) => (
              <div key={val} className="flex items-center gap-2 min-w-0">
                <Checkbox
                  className="shrink-0"
                  checked={selectedVals.includes(val)}
                  onCheckedChange={(checked) => {
                    const set = new Set(selectedVals);
                    if (checked) set.add(val);
                    else set.delete(val);
                    onPatch({ selectedOptionValues: Array.from(set) });
                  }}
                />
                <span className="text-xs truncate" title={val}>
                  {val}
                </span>
              </div>
            ))}
          </div>
        </div>
      ) : selectedId ? (
        <p className="text-[10px] text-amber-600">No values in this dictionary or still loading.</p>
      ) : null}
    </>
  );
}

function TextStaticStyleFields({
  cfg,
  update,
  textAlignDefault,
}: {
  cfg: Record<string, unknown>;
  update: (key: string, value: unknown) => void;
  textAlignDefault: string;
}) {
  return (
    <>
      <div>
        <Label className="text-xs">Text</Label>
        <Input
          value={(cfg.text as string) ?? '0.00'}
          onChange={(e) => update('text', e.target.value)}
          className="h-8 text-sm mt-1"
        />
      </div>
      <div>
        <Label className="text-xs">Prefix</Label>
        <Input
          value={(cfg.prefix as string) ?? '￥'}
          onChange={(e) => update('prefix', e.target.value)}
          className="h-8 text-sm mt-1"
        />
      </div>
      <div>
        <Label className="text-xs">Font Size</Label>
        <Input
          type="number"
          value={(cfg.fontSize as number) ?? 14}
          onChange={(e) => update('fontSize', Number(e.target.value) || 14)}
          className="h-8 text-sm mt-1"
        />
      </div>
      <div>
        <Label className="text-xs">Text Align</Label>
        <Select
          value={(cfg.textAlign as string) ?? textAlignDefault}
          onValueChange={(v) => update('textAlign', v)}
        >
          <SelectTrigger className="h-8 text-sm mt-1">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="left">Left</SelectItem>
            <SelectItem value="center">Center</SelectItem>
            <SelectItem value="right">Right</SelectItem>
          </SelectContent>
        </Select>
      </div>
    </>
  );
}

/** 读 config（兼容后端 PascalCase、数字以字符串下发） */
function cfgPickStr(cfg: Record<string, unknown>, keys: string[], fallback: string): string {
  for (const k of keys) {
    const v = cfg[k];
    if (v != null && String(v).trim() !== '') return String(v).trim();
  }
  return fallback;
}

function cfgPickNum(cfg: Record<string, unknown>, keys: string[], fallback: number): number {
  for (const k of keys) {
    const v = cfg[k];
    if (v == null || v === '') continue;
    const n = typeof v === 'number' ? v : Number(v);
    if (Number.isFinite(n)) return n;
  }
  return fallback;
}

function ElementConfigFields({
  element,
  onChange,
}: {
  element: LabelElement;
  onChange: (config: Record<string, unknown>) => void;
}) {
  const cfg = element.config as Record<string, unknown>;
  const update = (key: string, value: unknown) =>
    onChange({ [key]: value });

  switch (element.type) {
    case 'TEXT_STATIC':
      if (cfg.inputType === 'options') {
        return (
          <>
            <MultipleOptionsDictionaryFields cfg={cfg} onPatch={onChange} />
            <TextStaticStyleFields cfg={cfg} update={update} textAlignDefault="left" />
          </>
        );
      }
      return <TextStaticStyleFields cfg={cfg} update={update} textAlignDefault="right" />;
    case 'TEXT_PRODUCT':
    case 'TEXT_PRICE':
      return <TextStaticStyleFields cfg={cfg} update={update} textAlignDefault="right" />;
    case 'BARCODE':
      return (
        <>
          <div>
            <Label className="text-xs">Data</Label>
            <Input
              value={(cfg.data as string) ?? '123456789'}
              onChange={(e) => update('data', e.target.value)}
              className="h-8 text-sm mt-1"
            />
          </div>
          <div>
            <Label className="text-xs">方向</Label>
            <Select
              value={(cfg.orientation as string) ?? 'horizontal'}
              onValueChange={(v) => update('orientation', v)}
            >
              <SelectTrigger className="h-8 text-sm mt-1">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="horizontal">水平</SelectItem>
                <SelectItem value="vertical">竖排</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div className="flex items-center gap-2">
            <Switch
              checked={(cfg.showText as boolean) !== false}
              onCheckedChange={(v) => update('showText', v)}
            />
            <Label className="text-xs">Show Text</Label>
          </div>
        </>
      );
    case 'QRCODE':
      return (
        <div>
          <Label className="text-xs">Data (URL)</Label>
          <Input
            value={(cfg.data as string) ?? 'https://example.com'}
            onChange={(e) => update('data', e.target.value)}
            className="h-8 text-sm mt-1"
          />
        </div>
      );
    case 'IMAGE':
      return (
        <>
          <div>
            <Label className="text-xs">Image URL / path</Label>
            <Input
              value={(cfg.src as string) ?? ''}
              onChange={(e) => update('src', e.target.value)}
              className="h-8 text-sm mt-1"
              placeholder="https://... or /picture/..."
            />
          </div>
          <div>
            <Label className="text-xs">Scale Mode</Label>
            <Select
              value={(cfg.scaleMode as string) ?? 'contain'}
              onValueChange={(v) => update('scaleMode', v)}
            >
              <SelectTrigger className="h-8 text-sm mt-1">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="contain">Contain</SelectItem>
                <SelectItem value="cover">Cover</SelectItem>
                <SelectItem value="fill">Fill</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </>
      );
    case 'DATE': {
      const inputTypeNorm = String(cfg.inputType ?? cfg.InputType ?? '').toLowerCase();
      const isPrintDate = inputTypeNorm === 'datetime' || inputTypeNorm === 'date';
      return (
        <>
          <div>
            <Label className="text-xs">Format</Label>
            <Input
              value={cfgPickStr(cfg, ['format', 'Format'], 'YYYY-MM-DD')}
              onChange={(e) => update('format', e.target.value)}
              className="h-8 text-sm mt-1"
              placeholder="YYYY-MM-DD"
            />
            {isPrintDate ? (
              <p className="text-[10px] text-gray-400 mt-1">
                Shown as placeholder on the label until the app fills the date at print time.
              </p>
            ) : null}
          </div>
          <div>
            <Label className="text-xs">Offset Days</Label>
            <Input
              type="number"
              value={cfgPickNum(cfg, ['offsetDays', 'OffsetDays'], 0)}
              onChange={(e) => update('offsetDays', Number(e.target.value) || 0)}
              className="h-8 text-sm mt-1"
            />
          </div>
        </>
      );
    }
    case 'TIME':
      return (
        <div>
          <Label className="text-xs">Format</Label>
          <Input
            value={cfgPickStr(cfg, ['format', 'Format'], 'HH:mm')}
            onChange={(e) => update('format', e.target.value)}
            className="h-8 text-sm mt-1"
            placeholder="HH:mm"
          />
        </div>
      );
    case 'DURATION':
      return (
        <>
          <div>
            <Label className="text-xs">Format</Label>
            <Input
              value={cfgPickStr(cfg, ['format', 'Format'], 'YYYY-MM-DD')}
              onChange={(e) => update('format', e.target.value)}
              className="h-8 text-sm mt-1"
              placeholder="YYYY-MM-DD"
            />
          </div>
          <div>
            <Label className="text-xs">Offset Days</Label>
            <Input
              type="number"
              value={cfgPickNum(cfg, ['offsetDays', 'OffsetDays'], 3)}
              onChange={(e) => update('offsetDays', Number(e.target.value) || 3)}
              className="h-8 text-sm mt-1"
            />
          </div>
        </>
      );
    case 'WEIGHT':
      return (
        <>
          <div>
            <Label className="text-xs">Value</Label>
            <Input
              type="number"
              value={cfgPickNum(cfg, ['value', 'Value'], 500)}
              onChange={(e) => update('value', Number(e.target.value) || 0)}
              className="h-8 text-sm mt-1"
            />
          </div>
          <div>
            <Label className="text-xs">Unit</Label>
            <Select
              value={cfgPickStr(cfg, ['unit', 'Unit'], 'g')}
              onValueChange={(v) => update('unit', v)}
            >
              <SelectTrigger className="h-8 text-sm mt-1">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="g">g</SelectItem>
                <SelectItem value="kg">kg</SelectItem>
                <SelectItem value="oz">oz</SelectItem>
                <SelectItem value="lb">lb</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </>
      );
    case 'WEIGHT_PRICE':
      return (
        <>
          <div>
            <Label className="text-xs">Unit Price</Label>
            <Input
              type="number"
              value={(cfg.unitPrice as number) ?? 10}
              onChange={(e) => update('unitPrice', Number(e.target.value) || 0)}
              className="h-8 text-sm mt-1"
            />
          </div>
          <div>
            <Label className="text-xs">Weight</Label>
            <Input
              type="number"
              step="0.1"
              value={(cfg.weight as number) ?? 0.5}
              onChange={(e) => update('weight', Number(e.target.value) || 0)}
              className="h-8 text-sm mt-1"
            />
          </div>
          <div>
            <Label className="text-xs">Currency</Label>
            <Input
              value={(cfg.currency as string) ?? '￥'}
              onChange={(e) => update('currency', e.target.value)}
              className="h-8 text-sm mt-1"
            />
          </div>
        </>
      );
    case 'NUTRITION':
      return (
        <>
          <div>
            <Label className="text-xs">Calories</Label>
            <Input
              type="number"
              value={(cfg.calories as number) ?? 120}
              onChange={(e) => update('calories', Number(e.target.value) || 0)}
              className="h-8 text-sm mt-1"
            />
          </div>
          <div>
            <Label className="text-xs">Fat</Label>
            <Input
              value={(cfg.fat as string) ?? '5g'}
              onChange={(e) => update('fat', e.target.value)}
              className="h-8 text-sm mt-1"
            />
          </div>
          <div>
            <Label className="text-xs">Protein</Label>
            <Input
              value={(cfg.protein as string) ?? '3g'}
              onChange={(e) => update('protein', e.target.value)}
              className="h-8 text-sm mt-1"
            />
          </div>
          <div>
            <Label className="text-xs">Carbs</Label>
            <Input
              value={(cfg.carbs as string) ?? '10g'}
              onChange={(e) => update('carbs', e.target.value)}
              className="h-8 text-sm mt-1"
            />
          </div>
        </>
      );
    case 'BLANK':
      return (
        <div className="text-xs text-gray-500">
          Blank spacer; no configuration needed.
        </div>
      );
    default:
      return (
        <div className="text-xs text-gray-500">
          Config for {element.type} (edit in code if needed)
        </div>
      );
  }
}