import { useEffect, useMemo, useState, type ReactNode } from 'react';
import { Database, ListFilter, Plus, RotateCcw, Search, Trash2 } from 'lucide-react';
import { Breadcrumb, Button, Input, Modal, Pagination, Select, Table, Tabs, Tag, type TableColumn } from '@/components/ui';
import { adminApi, type DictionaryItem } from '@/api/adminApi';
import { formatDateTime } from '@/utils/dateTime';

type PhoneSegment = DictionaryItem & {
  prefix?: string;
  carrier?: string;
  province?: string | null;
  city?: string | null;
};

type CarrierRule = DictionaryItem & {
  carrier?: string;
  pattern?: string;
  priority?: number;
  remark?: string | null;
};

const carrierTone: Record<string, 'success' | 'info' | 'warning' | 'neutral'> = {
  中国移动: 'success',
  中国联通: 'info',
  中国电信: 'warning',
};

const ruleCarrierMeta: Record<string, { label: string; tone: 'success' | 'info' | 'warning' | 'neutral' }> = {
  mobile: { label: '中国移动', tone: 'success' },
  unicom: { label: '中国联通', tone: 'info' },
  telecom: { label: '中国电信', tone: 'warning' },
};

type PhoneSegmentSummaryProps = {
  icon: ReactNode;
  label: string;
  description: string;
  total: number;
};

function PhoneSegmentSummary({ icon, label, description, total }: PhoneSegmentSummaryProps) {
  return (
    <section className="phone-segment-summary" aria-label={label}>
      <span className="phone-segment-summary__icon">{icon}</span>
      <div className="phone-segment-summary__value">
        <span>{label}</span>
        <strong>{total.toLocaleString('zh-CN')}</strong>
      </div>
      <p>{description}</p>
    </section>
  );
}

export function AdminPhoneSegmentsPage() {
  const pageSize = 25;
  const [segments, setSegments] = useState<PhoneSegment[]>([]);
  const [segmentTotal, setSegmentTotal] = useState(0);
  const [rules, setRules] = useState<CarrierRule[]>([]);
  const [ruleTotal, setRuleTotal] = useState(0);
  const [activeTab, setActiveTab] = useState<'segments' | 'rules'>('segments');
  const [keyword, setKeyword] = useState('');
  const [creating, setCreating] = useState(false);
  const [creatingRule, setCreatingRule] = useState(false);
  const [prefix, setPrefix] = useState('');
  const [carrier, setCarrier] = useState('中国移动');
  const [province, setProvince] = useState('');
  const [city, setCity] = useState('');
  const [ruleCarrier, setRuleCarrier] = useState('mobile');
  const [rulePattern, setRulePattern] = useState('');
  const [rulePriority, setRulePriority] = useState('100');
  const [ruleRemark, setRuleRemark] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);
  const [segmentQuery, setSegmentQuery] = useState('');
  const [page, setPage] = useState(1);
  const [rulePage, setRulePage] = useState(1);
  const [reloadKey, setReloadKey] = useState(0);
  const [deleteTarget, setDeleteTarget] = useState<PhoneSegment | null>(null);
  const [ruleDeleteTarget, setRuleDeleteTarget] = useState<CarrierRule | null>(null);

  useEffect(() => {
    let cancelled = false;
    setLoading(true);
    Promise.all([
      adminApi.listPhoneSegments({ keyword: segmentQuery || undefined, page, pageSize }),
      adminApi.listPhoneCarrierRules({ keyword: segmentQuery || undefined, page: rulePage, pageSize }),
    ])
      .then(([segmentPage, ruleResponse]) => {
        if (cancelled) return;
        setSegments(segmentPage.items as PhoneSegment[]);
        setSegmentTotal(segmentPage.total);
        setRules(ruleResponse.items as CarrierRule[]);
        setRuleTotal(ruleResponse.total);
        setError('');
      })
      .catch((failure: Error) => {
        if (!cancelled) setError(failure.message || '手机号段加载失败');
      })
      .finally(() => {
        if (!cancelled) setLoading(false);
      });
    return () => {
      cancelled = true;
    };
  }, [page, reloadKey, rulePage, segmentQuery]);

  const segmentTotalPages = Math.max(1, Math.ceil(segmentTotal / pageSize));
  const ruleTotalPages = Math.max(1, Math.ceil(ruleTotal / pageSize));

  function createSegment() {
    adminApi.createPhoneSegment({ prefix, carrier, province, city })
      .then(() => {
        setPrefix('');
        setProvince('');
        setCity('');
        setCreating(false);
        setPage(1);
        setReloadKey((current) => current + 1);
      })
      .catch((failure: Error) => setError(failure.message || '手机号段新增失败'));
  }

  function createCarrierRule() {
    adminApi.createPhoneCarrierRule({ carrier: ruleCarrier, pattern: rulePattern, priority: Number(rulePriority) || 100, remark: ruleRemark })
      .then(() => {
        setRulePattern('');
        setRuleRemark('');
        setCreatingRule(false);
        setReloadKey((current) => current + 1);
      })
      .catch((failure: Error) => setError(failure.message || '运营商区分规则新增失败'));
  }

  function query() {
    setSegmentQuery(keyword.trim());
    setPage(1);
    setRulePage(1);
  }

  function reset() {
    setKeyword('');
    setSegmentQuery('');
    setPage(1);
    setRulePage(1);
  }

  function deleteSegment() {
    if (!deleteTarget) return;
    adminApi.deletePhoneSegment(deleteTarget.id)
      .then(() => {
        setDeleteTarget(null);
        setReloadKey((current) => current + 1);
      })
      .catch((failure: Error) => setError(failure.message || '手机号段删除失败'));
  }

  function deleteCarrierRule() {
    if (!ruleDeleteTarget) return;
    adminApi.deletePhoneCarrierRule(ruleDeleteTarget.id)
      .then(() => {
        setRuleDeleteTarget(null);
        setReloadKey((current) => current + 1);
      })
      .catch((failure: Error) => setError(failure.message || '运营商区分规则删除失败'));
  }

  const columns = useMemo<Array<TableColumn<PhoneSegment>>>(() => [
    { key: 'segment', title: '手机号段（前7位）', width: '190px', render: (record) => <strong className="phone-segment-prefix">{record.prefix}</strong> },
    { key: 'carrier', title: '运营商', width: '130px', render: (record) => record.carrier ? <Tag tone={carrierTone[record.carrier] ?? 'neutral'}>{record.carrier}</Tag> : '-' },
    { key: 'province', title: '省份', width: '110px', render: (record) => record.province ?? '-' },
    { key: 'city', title: '城市', width: '110px', render: (record) => record.city ?? '-' },
    { key: 'createdAt', title: '创建时间', width: '170px', render: (record) => formatDateTime(record.createdAt) },
    { key: 'actions', title: '操作', width: '90px', align: 'right', render: (record) => <Button className="phone-segment-delete" icon={<Trash2 size={14} />} onClick={() => setDeleteTarget(record)} size="sm" variant="ghost">删除</Button> },
  ], []);

  const ruleColumns = useMemo<Array<TableColumn<CarrierRule>>>(() => [
    { key: 'carrier', title: '运营商', width: '140px', render: (record) => { const meta = ruleCarrierMeta[record.carrier ?? '']; return meta ? <Tag tone={meta.tone}>{meta.label}</Tag> : record.carrier ?? '-'; } },
    { key: 'pattern', title: '号码前缀正则', render: (record) => <strong>{record.pattern}</strong> },
    { key: 'priority', title: '优先级', width: '120px', render: (record) => record.priority ?? 100 },
    { key: 'remark', title: '备注', render: (record) => record.remark ?? '-' },
    { key: 'actions', title: '操作', width: '90px', align: 'right', render: (record) => <Button className="phone-segment-delete" icon={<Trash2 size={14} />} onClick={() => setRuleDeleteTarget(record)} size="sm" variant="ghost">删除</Button> },
  ], []);

  const queryPanel = (
    <div className="phone-segment-query">
      <Input aria-label="关键词" onChange={(event) => setKeyword(event.target.value)} onKeyDown={(event) => { if (event.key === 'Enter') query(); }} placeholder={activeTab === 'segments' ? '搜索手机号段、运营商、省份或城市' : '搜索运营商、正则或备注'} prefix={<Search size={16} />} value={keyword} />
      <div className="phone-segment-query__actions">
        <Button icon={<Search size={16} />} onClick={query}>查询</Button>
        <Button icon={<RotateCcw size={16} />} onClick={reset} variant="ghost">重置</Button>
      </div>
    </div>
  );

  return (
    <section className="page-stack admin-system-page phone-segment-workbench">
      <div className="page-heading">
        <div className="phone-segment-heading">
          <Breadcrumb items={['系统管理', '手机号段库']} />
          <p>维护号码前七位归属，用于运营商识别与路由判断</p>
        </div>
        <Button icon={<Plus size={16} />} onClick={() => activeTab === 'segments' ? setCreating(true) : setCreatingRule(true)}>
          {activeTab === 'segments' ? '新增号段' : '新增规则'}
        </Button>
      </div>
      {error ? <p className="form-error">{error}</p> : null}

      <div className="surface admin-system-table-card phone-segment-panel">
        <Tabs
          className="phone-segment-workbench__tabs"
          onChange={(value) => {
            setActiveTab(value as 'segments' | 'rules');
          }}
          value={activeTab}
          items={[
            {
              label: '手机号段',
              value: 'segments',
              content: (
                <div className="phone-segment-tab-content">
                  <PhoneSegmentSummary description="当前库中可查询的号码前七位记录" icon={<Database size={22} />} label="已收录手机号段" total={segmentTotal} />
                  {queryPanel}
                  <Table columns={columns} data={segments} emptyText={loading ? '加载中...' : '暂无手机号段'} pagination={false} rowKey="id" />
                  <Pagination
                    page={page}
                    previousDisabled={page <= 1 || loading}
                    nextDisabled={page >= segmentTotalPages || loading}
                    onPrevious={() => setPage((current) => Math.max(1, current - 1))}
                    onNext={() => setPage((current) => Math.min(segmentTotalPages, current + 1))}
                    onPageChange={setPage}
                    total={segmentTotal}
                    totalPages={segmentTotalPages}
                  />
                </div>
              ),
            },
            {
              label: '运营商区分规则',
              value: 'rules',
              content: (
                <div className="phone-segment-tab-content">
                  <PhoneSegmentSummary description="按优先级匹配号码前缀的识别规则" icon={<ListFilter size={22} />} label="运营商识别规则" total={ruleTotal} />
                  {queryPanel}
                  <Table columns={ruleColumns} data={rules} emptyText={loading ? '加载中...' : '暂无运营商区分规则'} pagination={false} rowKey="id" />
                  <Pagination
                    page={rulePage}
                    total={ruleTotal}
                    totalPages={ruleTotalPages}
                    previousDisabled={rulePage <= 1 || loading}
                    nextDisabled={rulePage >= ruleTotalPages || loading}
                    onPrevious={() => setRulePage((current) => Math.max(1, current - 1))}
                    onNext={() => setRulePage((current) => Math.min(ruleTotalPages, current + 1))}
                    onPageChange={setRulePage}
                  />
                </div>
              ),
            },
          ]}
        />
      </div>

      <Modal
        footer={(
          <>
            <Button onClick={() => setCreating(false)} variant="ghost">取消</Button>
            <Button disabled={!prefix} onClick={createSegment}>保存</Button>
          </>
        )}
        onClose={() => setCreating(false)}
        open={creating}
        title="新增手机号段"
      >
        <div className="admin-system-modal-form">
          <Input label="手机号段" maxLength={7} onChange={(event) => setPrefix(event.target.value)} placeholder="手机号码前7位" value={prefix} />
          <Select
            label="运营商"
            onChange={(event) => setCarrier(event.target.value)}
            options={[
              { label: '中国移动', value: '中国移动' },
              { label: '中国联通', value: '中国联通' },
              { label: '中国电信', value: '中国电信' },
            ]}
            value={carrier}
          />
          <Input label="省份" onChange={(event) => setProvince(event.target.value)} value={province} />
          <Input label="城市" onChange={(event) => setCity(event.target.value)} value={city} />
        </div>
      </Modal>

      <Modal
        footer={(
          <>
            <Button onClick={() => setCreatingRule(false)} variant="ghost">取消</Button>
            <Button disabled={!rulePattern} onClick={createCarrierRule}>保存</Button>
          </>
        )}
        onClose={() => setCreatingRule(false)}
        open={creatingRule}
        title="新增运营商区分规则"
      >
        <div className="admin-system-modal-form">
          <Select
            label="运营商"
            onChange={(event) => setRuleCarrier(event.target.value)}
            options={[
              { label: '移动', value: 'mobile' },
              { label: '联通', value: 'unicom' },
              { label: '电信', value: 'telecom' },
            ]}
            value={ruleCarrier}
          />
          <Input label="号码前缀正则" onChange={(event) => setRulePattern(event.target.value)} placeholder="例如 ^13[4-9]" value={rulePattern} />
          <Input label="优先级" onChange={(event) => setRulePriority(event.target.value)} value={rulePriority} />
          <Input label="备注" onChange={(event) => setRuleRemark(event.target.value)} value={ruleRemark} />
        </div>
      </Modal>
      {deleteTarget ? (
        <Modal
          footer={<><Button onClick={() => setDeleteTarget(null)} variant="ghost">取消</Button><Button onClick={deleteSegment} variant="danger">确认删除</Button></>}
          onClose={() => setDeleteTarget(null)}
          open
          title="删除手机号段"
        >
          <p>确认删除手机号段“{deleteTarget.prefix}”吗？删除后号码归属识别将不再使用该记录。</p>
        </Modal>
      ) : null}
      {ruleDeleteTarget ? (
        <Modal
          footer={<><Button onClick={() => setRuleDeleteTarget(null)} variant="ghost">取消</Button><Button onClick={deleteCarrierRule} variant="danger">确认删除</Button></>}
          onClose={() => setRuleDeleteTarget(null)}
          open
          title="删除运营商区分规则"
        >
          <p>确认删除规则“{ruleDeleteTarget.pattern}”吗？删除后运营商识别将不再使用该规则。</p>
        </Modal>
      ) : null}
    </section>
  );
}